Question

我的代码类似于：

<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”时返回的值。

Answer 1

我可能读错了，但你完全覆盖了#content的内容。加载命令完成后，#child1和#child2 div不再存在。

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

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

加载完成后重新绑定事件
在#content节点

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

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

即使您用全新的HTML替换了节点，这也可以有效地保持#child1点击处理程序。

单击嵌套div时，div返回父ID。如何在不接收父ID的情况下返回子ID？

1 个答案: