在新添加的AJAX元素上綁定相同的事件

Question

我試圖將無限滾動網站移植到移動設備，禁用AJAX滾動並用AJAX「更多」按鈕替換它。我在理解如何將初始點擊事件綁定到「更多」按鈕的後續實例時遇到問題。

我在編程方面仍然很綠，但是如果我做了兩件事就足夠了解它是錯誤的。如何將.on（）內部的事件綁定到「more」的每個實例，因爲它們是動態添加到頁面的？

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

想通了。 JQuery的.on（）有額外的參數，允許稍後動態添加目標元素。在這種情況下，將所述綁定到特定的選擇父元素內（如document）完成該任務：

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

所以，對於在問題的例子中，代碼應該是：

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