如何将 JS 点击事件附加到 AJAX 加载按钮？答案

【问题标题】：How do I attach a JS click event to an AJAX loaded button?如何将 JS 点击事件附加到 AJAX 加载按钮？
【发布时间】：2014-10-16 16:03:12
【问题描述】：

我需要将 JavaScript 点击监听器附加到 DevExpress 网格视图上的添加新记录确认。我不能使用常规的单击事件侦听器，因为它是通过集成到控件中的 AJAX 加载的。我也无法访问按钮的代码，因此无法扩展它。我唯一拥有的是按钮名称。

理想情况下，我想监听 DOM 上按钮的外观，然后附加监听器，有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

您无需等待按钮在 DOM 中出现。

只需使用委托事件处理程序附加到动态元素的不变的祖先。

例如

$(document).on('click', '.someclass', function(){
   ///
});

如果您只有按钮的元素名称，请使用属性选择器：

例如

$(document).on('click', '[name="somename"]', function(){
   ///
});

委托事件通过侦听冒泡到不变的祖先的事件来工作（document 是默认值，如果没有更接近的可用）。它然后在事件时间（而不是在事件注册时间）应用选择器。它然后为引起事件的任何匹配元素调用函数。

最终结果是，它可以在事件发生时与稍后可能存在的元素一起使用。

注意：如果没有什么更接近动态内容，请使用document，但不要使用'body'，因为样式会使其高度为零，并且委托的鼠标事件将不起作用！

【讨论】：

在我的按钮单击处理程序被 ASP.NET 应用程序中的 Ajax 清除的情况下，这救了我。将点击处理程序委托给文档级别修复了由于文档不受 Ajax 影响，只有特定 div 的问题。太棒了！