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

Posted 2023-05-09

【中文标题】如何将事件绑定到从 AJAX 请求注入的 HTML

【英文标题】：How to bind events to HTML injected from AJAX requests

【发布时间】：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。解决此问题的最佳解决方案是什么？

谢谢。

【问题讨论】：

类似***.com/questions/11976236/ajax-including-a-page

How to bind a function to Element loaded via Ajax的可能重复

【参考方案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方法

也见这个例子

Event binding on dynamically created elements?

【讨论】：

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

【参考方案4】：

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