Side navigation
#5845 closed bug (fixed)
Opened January 18, 2010 08:41AM UTC
Closed January 25, 2010 02:38AM UTC
Error with closing tags in query 1.4 and html method (1.3.2 was OK)
| Reported by: | ecentinela | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4.1 |
| Component: | core | Version: | 1.4 |
| Keywords: | html closing tags | Cc: | |
| Blocked by: | Blocking: |
Description
When using the html in 1.4 the elements are not injected correctly.
In the attached test case you can see a div called "parent_2" that must be in the same level as "parent_1", but in jQuery 1.4 it's injected as a child of "parent_1".
Seems that the problem comes with the auto closing div called "child_1_of_child_1_of_parent_1", because if I change it for a "open and close tag", it works!
This is a bug introduced in 1.4 that was not present in 1.3.2
Hope it can be solved in 1.4.1 because a lot of my code is using this type of notation (it worked on all versions of jQuery I used).
PD: if you change the ".html" for ".append" the elements are injected correctly.
This bug isn't what you think. You are using XHTML syntax (self closing tags) in an HTML context (the page is not served with content type application/xhtml+xml). When the page is served as HTML (not a bad thing, since the XHTML media type is not well supported), you can't self-close elements like
<div>. See the above document, section A.3. Some UAs (WebKit, I've noticed) actually log errors when you do what you're doing.Here's your test page served as XHTML and as HTML. I only modified it by inserting your HTML snippet directly into the document, so we can compare how the browser parses it with how it's inserted by jQuery. If you look at both pages with a DOM inspector, you'll notice that the div in the HTML and the div inserted by jQuery are identical, but they're different between the two pages.
Older versions of jQuery filter the text passed to
$.fn.html()and convert<div />into<div></div>before feeding it to the browser, which masks the problem. 1.4 still does this filtering in some cases (like$.fn.append()) but not in$.fn.html(), so your bad markup is revealed.