如何将事件绑定到从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请求注入。那么解决这个问题的最佳方案是什么呢？

谢谢。

- Justin

---

类似的问题：http://stackoverflow.com/questions/11976236/ajax-including-a-page - Musa

可能是重复的问题：如何将函数绑定到通过Ajax加载的元素。 - Ciro Santilli OurBigBook.com

Answer 1

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

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

然后，即使是动态添加的元素，它也能正常工作。

- Danil Speransky

Answer 2

使用on方法使其生效。

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

- Shankar Cabus

Answer 3

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

也可以参考以下示例

如何绑定动态创建元素的事件？

- rahul

---

但是我必须管理事件，因为每次 AJAX 请求被触发时，它都会绑定另一个事件。例如，AJAX 请求每 10 秒调用一次。 - Justin

Answer 4

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

- Lucas Green