Question

当代理人使用p代码时，它无效http://jsfiddle.net/peswe/wbVMV/4/

HTML：

<p id='test'>
    <div>box 1
        <div>box in box1</div>
    </div>
</p>

JavaScript的：

$('p#test').delegate('div','click',function(){
    alert('test');
})

将p#test更改为span#test或body，它有效http://jsfiddle.net/peswe/wbVMV/3/

HTML：

<span id='test'>
    <div>box 1
        <div>box in box1</div>
    </div>
</span>

JavaScript的：

$('span#test').delegate('div','click',function(){
    alert('test');
})

请告诉我一些关于它的事情。非常感谢你！

Answer 1

这就是浏览器（HTML解析器）的工作原理，因为<div>是Flow element而<p>是Phrasing element，在大多数情况下，措辞元素不能包含任何流元素，这被称为 misnested标签，HTML解析器将通过某些特定步骤神奇地解决这些问题：

阅读<p>时，会生成<p>元素
在阅读<div>时，由于<div>无法驻留在<p>元素中，HTML解析器会关闭最后一个<p>元素，然后打开<div>元素< / LI>
阅读</div>时，请关闭<div>元素
在阅读</p>时，由于之前的<p>元素已关闭，解析器会将其识别为缺少开始标记的 <p>元素，因此解析器会自动插入<p>在此处开始标记以创建完整的<p>元素

因此，最终的DOM构造是：

<p id="test"></p> <!-- auto closed -->
<div>
  box1
  <div>
    box in box1
  </div>
</div>
<p></p> <!-- auto generated -->

显而易见<div>和<p>处于同一级别，而不是形成包含关系，因此委托在这里失败。

Answer 2

浏览器正在更正无效的HTML并将div移到p之外。他们成为兄弟姐妹，因此事件授权不起作用。只需检查元素并亲眼看看：

第一种情况：

<body>
  <p id="test"></p>
    <div>box 1
        <div>box in box1</div>
    </div>
    <p></p>
</body>

第二种情况：

<body>
  <span id="test">
    <div>box 1
        <div>box in box1</div>
    </div>
  </span>
</body>

Answer 3

p代码只能包含inline elements，虽然<span>标签（可以很好地处理内联块元素的交叉浏览器标识）可以很好地接受（在代码中它可能导致混乱）div标记，尽管不正确

它不会在严格的4.01 doctype和HTML5中验证。

适当的方法是将它包装在块级元素中：div。