Skip to main content

Bug Tracker

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

http://jsfiddle.net/npMDu/1/

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 anonymous comment:1

Of note: the last line in my Fiddle, above, shows how the text is no longer considered part of the A tags!

Changed June 06, 2011 07:57PM UTC by anonymous 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 anonymous comment:3

Simpler test case: http://jsfiddle.net/npMDu/3/

Changed June 07, 2011 02:04PM UTC by rwaldron comment:4

component: unfiledmanipulation
priority: undecidedlow
resolution: → invalid
status: newclosed

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.

http://jsfiddle.net/rwaldron/npMDu/7/

Changed June 07, 2011 08:50PM UTC by anonymous 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 anonymous 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:

http://jsfiddle.net/alanhogan/Neznc/6/

Changed June 07, 2011 09:02PM UTC by rwaldron comment:7

resolution: invalid
status: closedreopened

Changed June 07, 2011 09:40PM UTC by anonymous 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 anonymous 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 rwaldron 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 dmethvin 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 anonymous 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 anonymous 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 anonymous 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 timmywil comment:15

status: reopenedopen

Changed July 12, 2011 05:42PM UTC by rwaldron comment:16

Changed July 12, 2011 05:42PM UTC by rwaldron comment:17

Duplicate of #6236.