JQuery点击事件仅触发一次：网格分页器点击需求问题排查

这个情况我太熟悉了！问题出在动态DOM元素的事件绑定上——你一开始用的直接click绑定，只会对绑定代码执行时已经存在于页面中的.dxp-num元素生效。而分页器在你点击页码后，通常会重新渲染（比如加载新页码后替换掉原来的分页元素），新生成的.dxp-num元素并没有被绑定点击事件，所以只有第一次点击有效。

正确的解决方案：使用事件委托 #

事件委托利用了DOM事件冒泡的特性，把事件绑定到一个始终存在的父元素（甚至是document）上，然后通过选择器匹配触发事件的目标元素。这样不管后续动态生成多少.dxp-num元素，点击事件都会被正确捕获。

修改你的代码如下：

$(document).ready(function () {
  // 优先选择分页器的直接父容器（如果知道具体选择器的话，比document更高效）
  $(document).on('click', '.dxp-num', function () {
    alert("The pager was clicked.");
  });
});

额外优化建议 #

如果能找到分页器的固定父容器（比如某个不会被重新渲染的容器，例如类名为.pagination-wrapper的元素），尽量把事件绑定到这个父元素上，而不是document：

$(document).ready(function () {
  $('.pagination-wrapper').on('click', '.dxp-num', function () {
    alert("The pager was clicked.");
  });
});

这样做的好处是减少事件冒泡的层级，提升性能，同时避免不必要的事件监听。

为什么原来的方法不行？ #

当你执行$(".dxp-num").click(...)时，jQuery会遍历当前DOM中所有匹配.dxp-num的元素，给每个元素绑定点击事件。但分页操作后，原来的页码元素可能被移除，新的页码元素是后来添加的，这些新元素并没有被绑定事件，所以点击它们不会触发alert。

内容的提问来源于stack exchange，提问作者Kar