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

Question

所以我通过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");
    });
 });

显然上面的事件永远不会触发，因为当页面准备就绪时，HTML尚未从AJAX请求中注入。解决这个问题的最佳解决方案是什么？

感谢。

Answer 1

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

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

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

Answer 2

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

也参见这个例子

Event binding on dynamically created elements?

Answer 3

使用on方法将其设为现场。

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

Answer 4

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