jQuery - Присоединить событие click внутри каждой функции для динамически добавленного контента

Question

Я столкнулся с небольшой проблемой и, похоже, не могу заставить ее работать.

У меня это как разметка.

<div id="label-group" class="label-group"> 
     <!-- Label Item --> 
     <div id="label-1" class="label-item"> 
      <div class="label-line"> 
       <a href="#" class="btn btn-small btn-simple btn-assign-schedule">Assign Schedule to Label</a> 
      </div> 
      <div class="label-head clearfix"> 
       <div class="label-title"> 
        UK Call Menus 
       </div> 
       <div class="label-tools"> 
        <a href="#" class="delete" title="Delete Label"></a> 
        <a href="#" class="moveup" title="Move Up"></a> 
        <a href="#" class="movedown" title="Move Down"></a> 
        <a href="#" class="toggle" title="Open &amp; Close"></a> 
       </div> 
      </div> 
     </div> 
    </div> 

И этот jQuery, который использует все ссылки на метки-инструменты и добавляет определенные функции при нажатии.

$(".label-group .label-tools a").each(function(){ 
    $(this).on('click',function(e) { 
     e.preventDefault(); 
     var li = $(this).closest(".label-item"); 

     if ($(this).hasClass('movedown')) { 
        li.css('opacity','0.5'); 
        li.next().css('opacity','0.5'); 
        li.insertAfter(li.next()).animate({opacity:"1"},200); 
        li.prev().animate({opacity:"1"},300); 
     } else if ($(this).hasClass('moveup')) { 
        li.css('opacity','0.5'); 
        li.prev().css('opacity','0.5'); 
        li.insertBefore(li.prev()).animate({opacity:"1"},200); 
        li.next().animate({opacity:"1"},300); 
     } else if ($(this).hasClass('toggle')) { 
       var liContent = $(this).closest(".label-head").siblings('.label-content'); 
        liContent.toggle(0,function(){ 
         li.toggleClass('label-open'); 
        }); 
     } else if ($(this).hasClass('delete')) { 
        li.remove(); 
     } 
    }) 
}) 

Когда я добавить еще .label-элемент в .label-группу динамически ссылки меток инструмента не работают.

Answer 1

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

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

т.е.

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

Пример

$(staticParentContainer).on('click',".label-group .label-tools a",function(e) { 
    //Your existing code 
}); 

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