DataTables Ajax加载后模态框提交按钮失效问题求助

问题根源 #

你当前的事件绑定代码$('.promote-button').on('click', ...)仅能作用于页面初始化时已存在的DOM元素。通过Ajax加载的表格及模态框按钮属于后续动态插入DOM的元素，不会自动继承之前绑定的事件，因此点击无响应。

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

利用jQuery的事件委托机制，将事件绑定到一个始终存在于页面的父元素（比如document或表格容器#results-table），借助事件冒泡触发动态元素的事件。

修改你的事件绑定代码为：

$(document).on('click', '.promote-button', function(e){
    e.preventDefault();
    alert('Clicked');
});

更精准的写法（推荐，缩小事件冒泡范围）：

$('#results-table').on('click', '.promote-button', function(e){
    e.preventDefault();
    alert('Clicked');
});

额外代码规范修正 #

注意studentsactionsmodals.php中按钮的class属性写法错误，一个元素不能包含多个class属性：

<!-- 错误写法 -->
<button type="submit" class="promote-button" class="btn btn-info">Submit</button>

<!-- 正确写法：合并为单个class属性 -->
<button type="submit" class="promote-button btn btn-info">Submit</button>

原理说明 #

事件委托依赖DOM事件冒泡特性：父元素捕获事件后，判断触发事件的目标元素是否匹配指定选择器，再执行回调函数。这种方式能覆盖所有初始存在和动态生成的目标元素。

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