委託爲什麼不能在「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

回答