Триггерные события из классов, назначенных впоследствии

Question

Мне нужно добавить класс к элементу «на лету». Но после добавления класса все события, связанные с этим классом, работают только с элементами, чьи классы уже были определены при загрузке документа.

Рассмотрите этот пример.
Text 1 еще не имеет класса, а Text 2. Когда нажимается кнопка, myClass присваивается Text 1, поэтому оба текста и текст 2 теперь относятся к классу myClass.
При щелчке элемента myClass появляется окно предупреждения, но это событие запускается только при нажатии Text 2. Элемент, класс которого уже был определен при загрузке документа.

<button>Add class to Text 1</button><br /> 
<a href="#">Text 1</a> <br /> 
<a href="#" class="myClass">Text 2</a> 

<script> 
$(document).ready(function() { 
    $("button").click(function() { 
    $("a").addClass("myClass"); 
    }); 
    $(".myClass").click(function() { 
    alert("clicked!"); 
    }); 
}); 
</script> 

Вот скрипку: https://jsfiddle.net/zx8wuy97/

Answer 1

Одним из вариантов было бы использовать event delegation. При этом событие привязывается к постоянному родительскому элементу, а класс элемента-потомка проверяется, когда событие действительно запущено (а не при подключении события).

Вы должны приложить прослушиватель событий к общему элементу предка, но в этом случае я привязал его к document, так как вы не предоставили никакой дополнительной разметки.

Updated Example

$(document).on('click', ".myClass", function() { 
    alert("clicked!"); 
}); 

Answer 2

$(".myClass").click(function() { 
    alert("clicked!"); 
}); 

// Is the same as: 

$("body").on("click", ".myClass",function() { 
    alert("clicked!"); 
}); 

Как динамически загруженного содержимого, это исправление сказал проблема.

In jQuery, how to attach events to dynamic html elements?