Side navigation
#9530 closed bug (duplicate)
Opened June 06, 2011 06:51PM UTC
Closed July 12, 2011 05:42PM UTC
Last modified March 14, 2012 03:47AM UTC
jQuery erroneously treats some a tags as self-closing
Reported by: | contact@alanhogan.com | Owned by: | |
---|---|---|---|
Priority: | low | Milestone: | 1.next |
Component: | manipulation | Version: | 1.6 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Test case:
Compare
to:
http://dl.dropbox.com/u/105727/web/why_not_links.html
Same exact input, different outputs.
What’s going on:
Sometimes you have code like:
<a href=http://example.com/>foo</a>
For example, one HTML sanitizes stripped out the surrounding quotes on the attribute value and gave me that output.
If you do an .html(foo) where foo is the above, then jQuery parses this as
if it were <a href="http://example.com" />
, self-closing, that is, <a href="http://example.com/..."></a>foo</a>
Thus the link is not actually clickable anymore; it's empty and then followed by a text node and an extra closing tag.
Attachments (0)
Change History (17)
Changed June 06, 2011 06:52PM UTC by comment:1
Changed June 06, 2011 07:57PM UTC by comment:2
I realize the problem description is a bit sparse, but basically: markup rendered directly in an HTML document (in WebKit) ≠ the same markup placed into a document via jQuery.
Changed June 06, 2011 08:13PM UTC by comment:3
Simpler test case: http://jsfiddle.net/npMDu/3/
Changed June 07, 2011 02:04PM UTC by comment:4
component: | unfiled → manipulation |
---|---|
priority: | undecided → low |
resolution: | → invalid |
status: | new → closed |
Your html is invalid. When using unquoted attribute syntax, the "/" (solidus) is being seen as a closing of the anchor. If you A) remove the solidus or B) add a space between the solidus and the closing greater-than, this issue does not exist.
Changed June 07, 2011 08:50PM UTC by comment:5
**Please re-open this issue.**
According to http://html5.validator.nu/ the markup I used above **is valid.**
Furthermore **all the browsers I checked render it as expected.** Only jQuery misunderstands.
While it is true that using quotes or inserting a space would “solve” the problem, note that I am not generating the input HTML by hand! It is **html5lib** that is outputting this markup. (https://code.google.com/p/html5lib/)
Please-reopen for discussion, as this is indeed a bug.
Changed June 07, 2011 08:55PM UTC by comment:6
Please note that .innerHTML
and .html()
yield very different results here, which is not intuitive and backs my claim that this is indeed a real bug.
New fiddle to demonstrate:
Changed June 07, 2011 09:02PM UTC by comment:7
resolution: | invalid |
---|---|
status: | closed → reopened |
Changed June 07, 2011 09:40PM UTC by comment:8
Note that I repeated my tests on these URLs:
http://jsfiddle.net/alanhogan/Neznc/6/
and
http://dl.dropbox.com/u/105727/web/why_not_links.html
in IE7, IE8, and Firefox (originally tested in Chrome), and the behavior is consistent: .innerHTML and native web page rendering get it right, and jQuery .html interprets erroneously as a self-closing element.
Changed June 08, 2011 04:00AM UTC by comment:9
Uh, interestingly enough, the last linked jsfiddle gains an odd quirk in the latest stable Chrome: the second button may not appear to remove the link! I think a redraw is failing to fire, as resizing the window or clicking the first button causes the text to finally disappear, and attempting to select or click the link, while it’s visible but removed, will fail. Separate issue, please ignore (or use Safari/Firefox if confused).
Changed June 08, 2011 04:55AM UTC by comment:10
Yeah I saw that. It's still pretty easy to avoid by quoting the href attribute value.
Changed June 08, 2011 04:53PM UTC by comment:11
I don't think this is something we can fix in the general case; IE6/7/8 also interprets a trailing slash in a url as a self-closing tag. (See #8939.) Is it such a burden to quote the attribute? If your HTML is being built from a variable you will need to be doing escaping anyway, right?
Changed June 08, 2011 06:19PM UTC by comment:12
I’m not sure I get what’s happening in #8939, but I tested IE8 in IE8 and IE7 modes and it parses the A tag correctly, that is to say, not like jQuery does, but like all other browsers.
Changed June 08, 2011 06:20PM UTC by comment:13
I am not building the URL from a variable, but rather, my HTML sanitizer is actually removing unnecessary quotes. And in all cases but jQuery’s, the quotes would indeed be unnecessary here.
I disagree with the parser’s behavior and am looking into changing it, but this bug is (a) still valid IMO and (b) something that, if fixed, would also solve my issue.
Changed June 10, 2011 08:02PM UTC by comment:14
Relevant html5lib "discussion" (no replies yet): http://groups.google.com/group/html5lib-discuss/browse_thread/thread/6d80ebe39e1f688b
The issue arises because of a combination of html5lib and jQuery quirks.
Disheartening to see that neither library seems to acknowledge a problem yet.
In the meantime, using raw .innerHTML solves my issue for now.
Changed June 29, 2011 07:30PM UTC by comment:15
status: | reopened → open |
---|
Changed July 12, 2011 05:42PM UTC by comment:16
resolution: | → duplicate |
---|---|
status: | open → closed |
Changed July 12, 2011 05:42PM UTC by comment:17
Duplicate of #6236.
Of note: the last line in my Fiddle, above, shows how the text is no longer considered part of the A tags!