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

How to bind events to HTML injected from AJAX requests

本文关键字：请求 AJAX 注入 HTML 事件 绑定      更新时间：2023-09-26

所以我通过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请求中注入。解决此问题的最佳解决方案是什么？

谢谢。

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

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

然后，它甚至可以使用普通添加的元素。

使用on方法使其生效。

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

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

另请参见此示例

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

将html插入DOM后，在ajax调用的成功回调中执行绑定。
相关文章：