我将一些 div 附加到 div 容器:
$.ajax(
{
type: "GET",
url: "/LoadedData",
data: { "pageNumber": pageNumber },
success: function (result) {
$('.Container').append(result);
}
}
当我尝试点击新的 div 时,我就是不能。我通过使用
省略了这一点$('.Container').live('click', function () {
});
但是你能告诉我为什么我不能在不使用 live() 的情况下做到这一点吗?
最佳答案
您将事件处理程序绑定(bind)到页面加载时存在的元素。
稍后添加的元素必须在当时绑定(bind)。
另一种方法是利用事件委托(delegate)。 jQuery 有 2 个委托(delegate)方法,.live()
和.delegate()
.
这些方法所发生的情况是,处理程序没有绑定(bind)到有问题的元素,而是绑定(bind)到某个容器。当单击事件冒泡到容器时,jQuery 会检查单击的元素是否与您提供的选择器匹配,如果是,则触发处理程序。
像这样可视化它:
$('.item').click(function() { /* do something */ });
像这样绑定(bind):
<div class="Container">
<div class="item">click me</div> <!-- handler is bound -->
<div class="item">click me</div> <!-- handler is bound -->
<div class="item">click me</div> <!-- handler is bound -->
</div>
但是这个:
$('.Container').delegate('.item','click', function() { /* do something */ });
像这样绑定(bind):
<div class="Container"> <!-- handler is bound to container, and runs the
".item" selector when a click occurs inside -->
<div class="item">click me</div>
<div class="item">click me</div>
<div class="item">click me</div>
</div>
因此,如果您添加额外的 .item
元素到.Container
,它们就会正常工作,因为处理程序会处理 .Container
内的所有点击。 .
<div class="Container"> <!-- handler is bound to container, and runs the
".item" selector when a click occurs inside -->
<div class="item">click me</div>
<div class="item">click me</div>
<div class="item">click me</div>
<div class="item">click me</div> <!-- new item -->
<div class="item">click me</div> <!-- new item -->
</div>
因此,新项目上的点击事件会像原始项目上一样冒泡。
.live()
方法与 .delegate()
相同方法。它只是使用 document
作为默认容器,这意味着它必须处理页面上的所有点击。
正因为如此,我更喜欢.delegate()
.
关于jquery - 附加到 html 的元素通过单击事件不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6018648/