我有一段jQuery,它会循环遍历给定div(#container)中的每个元素,并且每次单击范围时都会发出JavaScript警报。如果<span>的值是静态的,则效果很好。
#container
<span>
但是,如果我使用如下代码:
$(someLink).click(function(){ $("#container").html( <new html with new spans> ) });
jQuery代码不会触发。奇怪的是
我的问题是:我的Click事件是否不适用于动态创建的项目?我想我必须在我的文档中添加准备好的内容或心跳脚本(每100毫秒触发一次)来关联事件?
做这个:
$( '#wrapper' ).on( 'click', 'a', function () { ... });
其中,#wrapper在其中添加了动态链接的静态元素。
#wrapper
因此,您有一个包装器,该包装器被硬编码到HTML源代码中:
<div id="wrapper"></div>
并在其中填充动态内容。想法是将事件委托给该包装器,而不是直接在动态元素上绑定处理程序。
顺便说一句,我推荐Backbone.js-它为该过程提供了结构:
var YourThing = Backbone.View.extend({ // the static wrapper (the root for event delegation) el: $( '#wrapper' ), // event bindings are defined here events: { 'click a': 'anchorClicked' }, // your DOM event handlers anchorClicked: function () { // handle click event } }); new YourThing; // initializing your thing