jQuery: привязка обработчика события к добавленному классу

Question

Я не уверен, почему следующий код не работает, может кто-то, пожалуйста, поищите меня? У меня есть настройка JSfiddle для демонстрации проблемы.

<div class="wrapper"> 
    <div class="state_1"> 
     <a href="#">state one</a> 
    </div> 
</div> 

<script> 
$('.state_1 a').click(function(){ 
    $(this).parent().removeClass('state_1').addClass('state_2'); 
    $(this).html('state two'); 
}); 

/* SECOND CLICK: NEVER TRIGGERS? */ 
$('.state_2 a').click(function(){ 
    alert("clicked!"); 
}); 
</script> 

Таким образом, сама ссылка не имеет класса, но находится в «контейнере» DIV под названием «.state_1». При первом щелчке ссылки класс «state_1» удаляется из контейнера, а «state_2» добавляется в его место. (Мы также меняем текст привязки на «состояние два»). Все это работает.

Проблема заключается в том, теперь "контейнер" DIV должен иметь класс».state_2" , но:

$('.state_2 a').click(); 

... никогда не срабатывает?

Любые идеи? JSfiddle: https://jsfiddle.net/m5ctkzg2/

Спасибо, что посмотрели!

Answer 1

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

Вы должны использовать Event Delegation с использованием .on() делегированных-событий подхода, при создании элементов динамически или селектора манипуляции (например, удаления и добавления классов).

Общий синтаксис

$(document).on('event','selector',callback_function) 

Пример

$('.wrapper').on('click', ".state_2 a", function(){ 
    //Your code 
}); 

Благодаря @Rory для Fiddle