DataTable分页后无法在Bootstrap模态框中设置值的问题求助

我之前也碰到过一模一样的问题！问题出在DataTable的动态DOM加载机制上：你初始化DataTable时，只有第一页的元素是直接渲染到页面里的，切换分页后，后面的行都是动态生成的新DOM元素。而你原来用的.click()事件，只能绑定到页面加载时就已经存在的元素上，新生成的按钮自然就不会触发这个点击事件了。

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

把原来的点击事件绑定方式改成事件委托，也就是把事件绑定到一个静态存在的父元素（比如document，或者DataTable的容器）上，让父元素去监听子元素的点击事件。这样不管是初始的还是动态生成的按钮，都能触发事件。

修改后的代码如下：

<!-- 按钮部分保持不变 -->
<button data-toggle="modal" data-target="#myCoupon" class="btn btn-primary updateCoupon" data-id="{{$user->id}}">Update Coupon</button>

<!-- 隐藏输入框部分保持不变 -->
<input id="hiddenCoupon" name="id" value="" type="hidden">

<script>
$(function () {
  // 改用事件委托绑定到document（或者更具体的父容器，比如你的DataTable容器）
  $(document).on('click', '.updateCoupon', function () {
    var my_id_value = $(this).data('id');
    $(".modal-body #hiddenCoupon").val(my_id_value);
  });
});
</script>

为什么这样有效？ #

事件委托利用了DOM的事件冒泡机制：当你点击动态生成的按钮时，点击事件会向上冒泡到绑定了事件的父元素（这里是document），父元素会检查触发事件的元素是否匹配.updateCoupon选择器，如果匹配就执行对应的回调函数。这样不管元素是何时生成的，只要符合选择器，就能触发事件。

额外优化建议 #

如果你的DataTable有一个固定的容器（比如<div id="user-table-container">），建议把事件绑定到这个容器上，而不是document，这样可以减少事件冒泡的层级，提升性能：

$('#user-table-container').on('click', '.updateCoupon', function () {
  var my_id_value = $(this).data('id');
  $(".modal-body #hiddenCoupon").val(my_id_value);
});

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