委托为什么不能在“p”标签中工作？

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

请告诉我一些关于it.Thank非常感谢！

2012-05-09 psjscs

这真的不是平常的（阅读：错误）在段落内有'div'。 :)虽然''元素接受大量标准的HTML标签。 'div'是块级元素。所以它不能嵌入内嵌'p' –

段落内的嵌套div是无效的HTML。 –

请在**问题中包含您的问题**的所有相关部分。 – Yoshi

这是浏览器（HTML解析器）是如何工作的，因为<div>是Flow element和<p>是一个Phrasing element，在大多数情况下，一个措辞元素不能包含任何流量元素，这被称为misnested标签，HTML解析器会修复这些问题神奇的机智ħ一定的步骤：

当读取<p>，它生成一个<p>元件
当读取<div>，由于<div>不能驻留在<p>元件，HTML解析器关闭最后<p>元件，然后打开一个<div>元件
当读取</div>，关闭<div>元件
当读取</p>，由于以前<p>元件被关闭时，解析器recogonize的IT作为<p>元素缺少开始标记，所以解析器会自动在这里插入一个<p>开始标签来创建一个完整的<p>元素

因此，最终的DOM结构是：

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

这是很明显，<div>和<p>处于相同的级别，没有形成包含关系，因此委托在此处失败。

2012-05-09 10:05:19 otakustay

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

2012-05-09 10:03:38

的p标签只能包含inline elements，虽然<span>标记（作为一个用于处理相当好直列块元件的跨浏览身份）接受相当好（在视觉上引起它得到弄乱的代码）的div标记，虽然不正确。

它不会验证严格的4.01文档类型或HTML5。

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

2012-05-09 10:06:19

回答