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

Question

[Анастасия]

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

$(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) + ":");
  });
});

Но если я дублирую этот блок, то в новом инпуте не работает первая функция с анимацией.
Подскажите, пожалуйста, как это исправить

Answer 1

[Владимир]

Ты вешаешь event listener на конкретный елемент, она тебе на нем и срабатывает. В JQuery как и в голом яваскрипте есть функция подписки, когда ты вешаешь событие на родительский елемент и внутри проверяешь на каком елементе оно вызвано. Тебе нужно использовать ее.
Слушатель вешаешь на форму, а сам клас инпута указываешь там где селектор

А вообщето 21 век на дворе и весь код по добавлению класса можно заменть чистым css
https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Answer 2

[pLavrenov]

$('body').on('click','.myClickableElement',function(){
        ... event handler code ....
});

Answer 3

[vıtalıyırtlach]

https://learn.javascript.ru/mutation-observer