jquery перестает работать для динамически созданных элементов

Question

У меня есть якорный тег, который при щелчке отображает больше элементов, после отображения этих элементов появляется еще один якорь и снова сбрасывает эти элементы. У меня есть этот скрипт, который ищет строку внутри атрибута evitd в теге привязки, строковое значение ('expand_collapse'), когда оно находит значение, запускает предупреждение, затем отображает больше элементов, и появляется якорь collapse, но скрипт не работая во второй раз, даже у якоря есть атрибут evtid со значением «expand_collapse». Любое предложение будет любезно оценили

$(document).ready(function(){ 
 
     $('.ms-cal-nav').each(function() { 
 
     var $this = $(this); 
 
     $this.on("click", function() { 
 
      if ($(this).attr('evtid').indexOf('expand_collapse') > -1) { 
 
      alert("hello"); 
 
     
 
      } 
 
     }); 
 
    }); 
 
});

<div class="ms-acal-ctrlitem" _expand="expand"><a href="javascript:void(0);" class="ms-cal-nav" evtid="expand_collapse"><img border="0" width="9" height="7">7 more items</a></div>

Answer 1

jQuery documentation имеет хорошее объяснение того, как это сделать - они называют их «Делегирование Events». Вы регистрируете своего слушателя на каком-то статическом элементе-предке (например, body, но желательно, что-то ближе к элементам, которые вы хотите контролировать), а затем прослушивайте событие на потомках. Это позволяет обрабатывать события с динамически добавленными элементами.

$(document).ready(function(){ 
    $('body').on('click','.ms-cal-nav', function() { 
    if ($(this).attr('evtid').indexOf('expand_collapse') > -1) { 
     alert("hello"); 
    } 
    }); 
}); 

Примечание: Я также удалил свой .each() вызов, как это было ненужно.