如何将事件绑定到从 AJAX 请求注入的 HTML答案

【问题标题】：How to bind events to HTML injected from AJAX requests如何将事件绑定到从 AJAX 请求注入的 HTML
【发布时间】：2012-08-26 20:04:24
【问题描述】：

所以我通过 AJAX 请求注入 html：

Ajax 响应

  <div id="my-element">HTML from AJAX request</div>

问题是id为#my-element的元素来自AJAX请求，但我也需要绑定事件。例如：

 $(document).ready(function() {
    $("#my-element").click(function() {
        alert("hit");
    });
 });

显然，上面的事件永远不会触发，因为当页面准备好时，还没有从 AJAX 请求中注入 HTML。解决此问题的最佳解决方案是什么？

谢谢。

【问题讨论】：

【解决方案1】：

尝试使用jQuery.on函数：http://api.jquery.com/on/

$(document).on('click', '#my-element', function () { ... });

然后它甚至可以使用动态添加的元素。

【讨论】：

【解决方案2】：

使用on 方法使其生效。

$(function(){
    $("#my-element").on("click",function() {
        alert("hit");
    });
});

【讨论】：

【解决方案3】：

在通过 AJAX 请求注入 html 完成后添加您的事件
或
你可以使用on方法

也见这个例子

【讨论】：

【解决方案4】：

在将 html 插入 DOM 之后，在 ajax 调用的成功回调中进行绑定。

【讨论】：