Связать идентичные события с новыми добавленными элементами AJAX

Question

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

Я все еще зеленый программирование, но знаю достаточно, что если я что-то делаю дважды, это неправильно. Как связать события внутри .on() с каждым экземпляром «больше», поскольку они динамически добавляются на страницу?

JS:

$('.more-link').on('click', function(){ 

    var url = $(this).attr('href');   
    $(this).removeAttr('href'); 
    $(this).remove(); 

    $.get(url, function(data) { 
     $('.infinite-container').append(data); 

     // Callback for .on() 
     }).done(function(){ 

     // Add visibility for "more" buttons 
     $('.more-link').css({'visibility': 'visible'}); 

     // Here's where I'm repeating myself  
     $('.more-link').on('click', function(){ 

      var url = $(this).attr('href'); 
      $(this).removeAttr('href'); 
      $(this).remove(); 

      $.get(url, function(data) { 
       $('.infinite-container').append(data); 
      }) 
     }); 

    }); 
}); 

Любые идеи и эффективность будут оценены.

Редактировать: Я должен добавить, что ссылки «больше» являются частью data, прикрепленной к концу контейнера при каждом вызове. Способ, которым я в настоящее время настроен, и функциональность ломается при третьем вызове.

Answer 1

Понял. У параметра .on() JQuery есть дополнительные параметры, которые позволяют добавлять динамически добавленные целевые элементы позже. В этом случае добавление привязки к конкретному селектору внутри родительского элемента (например, document) выполняет задачу:

$(element).on('event', 'selector', function(event) {...}); 

Таким образом, для примера, в этом вопросе, код должен быть:

$(document).on('click', '.more-link', function(){..stuff..});