Question

When delegate with p tag, it does not work 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');
})

---

Changing p#test to span#test or body, it works 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');
})

Please tell me something about it.Thank you very much!

Answer 1

This is how browser (HTML parser) works, since <div> is a Flow element and <p> is a Phrasing element, in most case an phrasing element cannot contain any flow element, this is called misnested tags, HTML parser would fix these issues magically with some certain steps:

1. When reading <p>, it generates a <p> element
2. When reading <div>, since <div> cannot reside in a <p> element, HTML parser closes the last <p> element, then open an <div> element
3. When reading </div>, closes the <div> element
4. When reading </p>, since previous <p> element is closed, parser recogonizes it as a <p> element missing a start tag, so parser automatically inserts an <p> start tag here to create a complete <p> element

Thus, the final DOM construct is:

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

It’s obvious that the <div> and <p> is at the same level, not forming a containing relation, so delegate fails here.