Как выполнять функцию после появления нового элемента?

У меня есть функция которая отвечает за анимацию для инпута:

$(document).ready(function InputAnimation() {
  $(".form__exchange input").on("focusin", function () {
    $(this).addClass("active");
    $(this).parent().find("label").addClass("active");
  });

  $(".form__exchange input").on("focusout", function () {
    if (!this.value) {
      $(this).removeClass("active");
      $(this).parent().find("label").removeClass("active");
    }
  });
});


И есть кнопка при нажиме на которую дублируется блок, в котором находится этот инпут:

$(document).ready(function () {
  var cloneCount = 2;
  $(".form__add button").on("click", function () {
    $(".form__exchange:last").clone().insertAfter($(".form__exchange:last"));
    $(".form__exchange input:last")
      .attr("id", "exchange__code--" + cloneCount++)
      .attr("name", "exchange__code--" + (cloneCount - 1));
    $(".form__exchange label:last")
      .attr("for", "exchange__code--" + (cloneCount - 1))
      .text("Next #" + (cloneCount - 1) + ":");
  });
});


Но если я дублирую этот блок, то в новом инпуте не работает первая функция с анимацией.
Подскажите, пожалуйста, как это исправить
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ты вешаешь event listener на конкретный елемент, она тебе на нем и срабатывает. В JQuery как и в голом яваскрипте есть функция подписки, когда ты вешаешь событие на родительский елемент и внутри проверяешь на каком елементе оно вызвано. Тебе нужно использовать ее.
Слушатель вешаешь на форму, а сам клас инпута указываешь там где селектор
60d1a11c71996735965986.png
А вообщето 21 век на дворе и весь код по добавлению класса можно заменть чистым css
https://developer.mozilla.org/en-US/docs/Web/CSS/:...
Ответ написан
@lavren
$('body').on('click','.myClickableElement',function(){
        ... event handler code ....
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы