XHTML导致jQuery委托事件触发错误的元素

Question

此JavaScript块绑定然后执行自定义事件。

$("#a").on("stuff", "#d",
function() {
  alert("hi");
});
$("#d").trigger("stuff");

使用此HTML，事件不应该触发，但它确实

<div id="a">
    <div id="b"/>
    <div id="c"/>
</div>
<div id="d">
</div>

然而，使用此HTML它可以正常工作。事件不会触发。

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
</div>
<div id="d">
</div>

差异似乎是使用XHTML。

这张贴在几个小提琴上。

这个不应该触发警报（在Chrome中），但它确实：http://jsfiddle.net/sZfs3/33/

这个按预期工作：http://jsfiddle.net/sZfs3/34/

我尝试了各种排列，例如使用类而不是id，并得到类似的问题。该文件是XHTML，我已经尝试过严格和过渡性的。有谁知道这是一个问题的原因吗？

Answer 1

就你的第一个例子而言。浏览器将您的HTML呈现为

<div id="a">
    <div id="b">
        <div id="c"></div>
        <div id="d"></div>
    </div>
</div>

因此d成为a的后代，因此触发了事件。你的问题在于

<div id="b"/>

注意div不是自闭元素。浏览器在遇到div

时会关闭</div>标记