jQuery动态创建元素无法调用ajaxPagination函数求解决方案

这个问题的核心是事件绑定的时机：你原来的ajaxPagination函数是直接给调用时已经存在的<a>标签绑定点击事件，但动态生成的链接是在AJAX请求完成后才加入DOM的，自然没被绑定到事件。下面给你两种可行的解决方案，按需选择：

方案一：改用事件委托（推荐） #

事件委托的原理是把事件绑定到静态存在的父元素上，由父元素监听子元素的点击事件——不管子元素是一开始就有的，还是后来动态生成的，都能触发逻辑。

你可以修改你的ajaxPagination插件，让它支持委托模式：

$.fn.ajaxPagination = function() {
  // 此时this指向你传入的静态父容器
  return this.unbind('click', 'a').on('click', 'a', function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass('disabled')) {
      var href = $(this).attr('href');
      var wrapper = $(this).closest('.content-wrapper');
      wrapper.addClass('loader-bg');
      $.post(href + '&ajax=1', function(response) {
        wrapper.removeClass('loader-bg');
        wrapper.html(response);
        sig.init();
      });
    }
    return false;
  });
};

然后调用的时候，把事件绑定到不会被AJAX替换的静态父元素上（比如.pagination容器，如果它本身不会被动态替换的话）：

$('.pagination').ajaxPagination();

如果.pagination本身也是AJAX动态生成的，那就绑定到更上层的静态元素，比如：

$('.content-wrapper').ajaxPagination();
// 或者极端情况用body
$('body').ajaxPagination();

这种方式只需要绑定一次，后续所有动态生成的分页链接都会自动生效，是最优雅的解决方案。

方案二：AJAX回调后重新绑定 #

如果你不想修改插件的结构，可以在每次AJAX加载完成、更新页面内容后，重新调用绑定函数，给新生成的链接绑定事件：

修改你原来的AJAX回调逻辑：

$.post(href + '&ajax=1', function(response) {
  wrapper.removeClass('loader-bg');
  wrapper.html(response);
  // 给新生成的分页链接重新绑定事件
  $('.pagination > li > a').ajaxPagination();
  sig.init();
  return false;
});

这种方式的缺点是每次AJAX请求后都要重复绑定，但因为你的插件里用了unbind('click')，所以不会出现重复绑定导致事件多次触发的问题，也能正常工作。

内容的提问来源于stack exchange，提问作者Biju P Dais