jQuery 给动态插入的元素绑定事件

转载自jQuery 给动态插入的元素绑定事件

jQuery 给动态插入的元素绑定事件

这个误会可能有点深。

一般情况下，给 HTML 元素绑定事件方法如下：

$('#sam').hover(
    function(){
        alert("hey it's sam.");
    }
);

附：jsfiddle

这样当鼠标移动到文本上时，浏览器会弹出一个对话框。

但是，以上绑定的方法只能适用页面内已有的元素，如果 ID 为 sam 的 DIV 块是动态生成的，比如利用 $().append() 方法，则上面的绑定方法不会有结果。

必须把它绑定给 document 元素，并指向目标元素：

$(document).on('mouseenter','#sam',function(){
    alert("hey it's sam.");
});

这样，才能达到我们预期的效果。

另一个办法是使用 jQuery 提供的 delegate API – 这其实跟上述方法是同样的道理，将事件委托给父元素，然后由父元素绑定给子元素，

$(“table”).delegate(“td”, “click”, function() { $(this).toggleClass(“chosen”); });

这样的好处是，我们不必要给每个子元素都注册事件，那样非常浪费，而且对动态插入的子元素也有效果。

又或者，在动态插入时就进行绑定。但这种办法并不优雅。

---

其它文章：

• jQuery事件：bind、delegate、on的区别
• jQuery三种事件绑定方式.bind(),.live(),.delegate()