在新添加的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..});