javascript - 为什么委托在“p”标签中不起作用？

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#testor 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');
})

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

score 3 · Accepted Answer

这就是浏览器（HTML 解析器）的工作原理，因为<div>它是Flow 元素并且<p>是Phrasing 元素，在大多数情况下，phrasing 元素不能包含任何流元素，这称为错误嵌套标签，HTML 解析器会通过某些步骤神奇地修复这些问题：

读取时<p>，它会生成一个<p>元素
读取时<div>，由于<div>不能驻留在<p>元素中，HTML解析器关闭最后一个<p>元素，然后打开一个<div>元素
读取时</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>and<p>处于同一级别，没有形成包含关系，所以委托在这里失败了。

score 2 · Accepted Answer

浏览器正在更正您的无效 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>

score 1 · Accepted Answer

p标签只能包含inline elements, 而标签（作为一个很好地处理内联块元素的跨浏览器标识的<span>标签）可以很好地接受标签（在视觉上导致代码混乱）div，尽管要么不正确。

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

The appropriate way would be to wrap it in a block-level element : a div.

3 回答 3