Применение .on на динамически добавленных элементах

Question

У меня есть фрагмент кода, который запускает запрос ajax другому скрипту и добавляет новые <li> s каждый раз, когда нажата кнопка.

Я использую следующий код:

$(function(){ 
$('.more').on("click",function(){ 
    var ID = $(this).attr("id"); 
    if(ID){ 
     $("#more"+ID).html('<img src="moreajax.gif" />'); 

     $.ajax({ 
      type: "POST", 
      url: "/cs_directory/helpers/jpost_load_post.php", 
      data: "lastmsg="+ ID, 
      cache: false, 
      success: function(html){ 
       $("ul#existing_campaign").append(html); 
       $("#more"+ID).remove(); // removing old more button 

      } 
     }); 
    }else{ 
     $(".morebox").html('The End');// no results 
    } 

    return false; 
}); 
}); 

Я добавляю кнопку #more вместе с возвращением из моего URL.

но, поскольку его прилагается после загрузки документа. Моя функция больше не применяется. Как я могу ее изменить, чтобы кнопка больше действовала рекурсивно каждый раз, когда я ее нажал?

Answer 1

Вам необходимо делегировать событие родителя элементов, которые добавляются динамически

$(document).on("click",'.more', function(){ 
     //your code 
}); 

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