0

我有类似这样的代码：

<div id="content">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

我正在使用 jQuery 点击事件

$('#child1').click(function(){
var page = "value1";

    $('#content').hide();
    $('#content').load('includes/'+ page +'.php', function () {
        $('#content').fadeIn(speed);
    });
    return false;
});

但是，当单击加载的#content ID 中的任何内容时，div 子级将返回父级 ID。如何在忽略父母的情况下选择子 ID？

实际的 HTML 更复杂，因此页面上子项的值不会简单地是#content#child1，有没有办法让 JS 忽略 #content 并看到 #child1？

如果我使用类似的代码

$('div').click(function(){
    alert($(this).attr("id"));
    return false;
});

单击“#child1”或为“#content”时返回的值。

4

1 回答 1

1

我可能读错了，但你已经完全覆盖了#content. 加载命令完成后，#child1和#child2div 不再存在。

即使您加载的数据包含一个#child1div，它也不是您最初将 click 事件附加到的 DOM 节点。那个旧节点不见了，取而代之的是你加载的数据，事件处理程序也不见了。

#child1.click()如果您想在旧的子节点被删除后继续监听事件，您有两种选择：

  • 加载完成后重新绑定事件
  • #content在节点上使用事件委托

事件委托允许您绑定一个侦听器#content，当事件从子元素冒泡时将触发该侦听器：

$('#content').on('click', '#child1', function(evt) {
    // event handler here
    // this points to the element clicked ('#child1')
});

#child1即使您已经用全新的 HTML 替换了节点，这也将有效地保持您的点击处理程序处于活动状态。

于 2012-10-31T20:18:44.977 回答