1

タグでデリゲートする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すると、動作しますhttp://jsfiddle.net/peswe/wbVMV/3/span#testbody

HTML:

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

JavaScript:

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

それについて教えてください。どうもありがとうございました。

4

3 に答える 3

3

これはブラウザー (HTML パーサー) のしくみです。これは<div>フロー要素であり<p>、フレージング要素であるためです。ほとんどの場合、フレージング要素にはフロー要素を含めることができません。これは誤ってネストされたタグと呼ばれます。HTML パーサーは、いくつかの特定の手順でこれらの問題を魔法のように修正します。 :

  1. を読み取ると、要素<p>を生成します<p>
  2. を読み取るとき、要素に常駐できない<div>ため、HTML パーサーは最後の要素を閉じてから要素を開きます<div><p><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>and<p>が同じレベルにあり、包含関係を形成していないことは明らかなので、デリゲートはここで失敗します。

于 2012-05-09T10:05:19.617 に答える
2

ブラウザは無効な HTML を修正しdiv、p. それらは兄弟になるため、イベント委任は機能しません。要素を調べて、自分の目で確かめてください。

最初のケース:

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

2 番目のケース:

<body>
  <span id="test">
    <div>box 1
        <div>box in box1</div>
    </div>
  </span>
</body>
于 2012-05-09T10:03:38.793 に答える
1

タグには,pのみを含めることができますがinline elements、<span>タグ (インライン ブロック要素のクロスブラウザー ID をかなり適切に処理するものとして) はタグをかなり適切に受け入れます (コードが混乱する原因となります) div。

厳密な 4.01 doctype でも HTML5 でも検証されません。

適切な方法は、ブロック レベルの要素 a でラップすることdivです。

于 2012-05-09T10:06:19.277 に答える