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

【问题标题】：How to bind a function to Element loaded via Ajax如何将函数绑定到通过 Ajax 加载的元素
【发布时间】：2012-04-12 01:15:31
【问题描述】：

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

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

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

【问题讨论】：

我同意约瑟夫的观点。按照他提供的链接阅读事件委托。

标签： javascript jquery html ajax

【解决方案1】：

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

demo

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

【讨论】：

我收到一个错误 TypeError: Object [object Object] has no method 'on'。我的猜测是我使用的是旧版本的 JQuery，我是对的。我从 1.6.2 升级到 1.7.2，现在它可以工作了。谢谢。