javascript - 为什么委托(delegate)在 "p"标签中不起作用？

Question

用p标签委托(delegate)时，不工作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 ，在大多数情况下，短语元素不能包含任何流元素，这称为错误嵌套标签，HTML 解析器会通过某些特定步骤神奇地修复这些问题:

1. 阅读时<p> ，它会生成一个 <p>元素
2. 阅读时<div> , 自 <div>不能驻留在 <p> 中元素，HTML 解析器关闭最后一个 <p>元素，然后打开一个 <div>元素
3. 阅读时</div> , 关闭 <div>元素
4. 阅读时</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>处于同一层次，没有形成包含关系，所以这里delegate失败。