如何将函数绑定到通过 Ajax 加载的元素

How to bind a function to Element loaded via Ajax

本文关键字:Ajax 加载 元素 函数 绑定      更新时间:2023-09-26

我的页面中有几个带有CSS class="hello"的Div"此外,我使用 Ajax 使用 CSS class="hello" 获取更多 Div我有一段代码在 Divs 的 Click 事件上调用,如下所示:

$('.hello').click(function(){
  alert("Hello Clicked");
})

它从一开始就适用于我的页面中存在的 Div,但不适用于使用 Ajax 加载的 Div。我需要做些什么才能将这一小段代码与新加载的 Div 绑定在一起?

您应该

使用 .on 将处理程序绑定到绑定执行期间已存在的另一个元素,例如 <body>document 并让它检测子事件。 但理想情况下,应将其绑定到加载内容的最近的公共父级。

演示

//bind to the body a "click" handler for elements that have class names of "hello"
$('body').on('click','.hello',function(){
  alert("Hello Clicked");
})