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

我有类似这样的代码：

我正在使用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和#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单击处理程序处于活动状态。