jQuery click() 事件未在 AJAX 加载的 HTML 元素上触发答案

【问题标题】：jQuery click() event not firing on AJAX loaded HTML elementsjQuery click() 事件未在 AJAX 加载的 HTML 元素上触发
【发布时间】：2015-06-09 21:45:18
【问题描述】：

这个主题很好地描述了我的问题，我假设它不会以这种方式工作，有没有办法让它工作？（解决方法）？

这是通过 AJAX 加载的代码：

<div>
<div id="s0frame" class="sframe"></div>
<div id="s1frame" class="sframe"></div>
<div id="s2frame" class="sframe"></div>
<div id="s3frame" class="sframe"></div>
<div id="s4frame" class="sframe"></div>
<div id="s5frame" class="sframe"></div>
<div id="chatframe" class="chat alpha60"></div>
</div>

这是我的点击事件：

$('.sframe').bind('click', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

这样做。

 $(document).on("click",".sframe",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 
 });

或

 $(document).delegate(".sframe","click",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 

 });

编辑：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate()。

【讨论】：

.live() 自 jQuery 1.7 起已弃用，因此将其替换 .on() 用于更新版本
谢谢你的作品很好，既然你先回答我会选择你的！
当我尝试 .on() 而不是 .live() 时，它不会触发。（编辑：那是因为我使用的是 1.7 吗？）
因使用live() 而被否决。它已被弃用，不应再推广它的使用（甚至在on()、delegate() 被推荐而不是live() 之前）。如果答案是固定的，我将删除我的反对票。
@AngelWorkz 谢谢，我已经删除了反对票（on() 变体仍然不正确，请参阅 3nigma 的答案）。

【解决方案2】：

您必须将事件处理程序重新附加到动态添加到 DOM 中的元素。 .live 方法被广泛使用，但现在已弃用。在 jQuery 版本 1.7+ 中，您可以使用 .on 或者您也可以使用 .delegate

$(document).on("click",".sframe",function(e){

});

使用委托

$(document).delegate(".sframe","click",function(e){

});

【讨论】：

这很有帮助。
谢谢@3nigma。第一种方法效果很好。

【解决方案3】：

除非您在将该标记加载到页面后调用该 .bind() 函数，否则您需要使用另一个函数，例如 .live() 或者如果使用最新版本的 jQuery，则最好使用 .on()，因为 .bind () 仅针对运行时已经存在的 DOM 元素，而 .live() 和 .on() 为您提供不同的范围选项来跟踪添加到页面的元素。

【讨论】：

感谢您的解释！

【解决方案4】：

$(document).on('click','sframe', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});

【讨论】：