Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 8 years ago

#1587 closed bug (worksforme)

Creating inline element without closing tag in IE fails

Reported by: jesse Owned by:
Priority: major Milestone: 1.2.1
Component: core Version: 1.2
Keywords: Cc:
Blocked by: Blocking:

Description

If you try to create an inline element by using $('<span>') without including the closing tag like $('<span></span>'), it won't work in Internet Explorer. There is no problem with block-level elements.

I have set up a demo showing that it is broken with <span> and <b> but not <div>:

http://www.thefutureoftheweb.com/demo/2007-09-11-jquery-inline-ie/

It was working in 1.1.2 but broke in 1.1.4. It remains broken in 1.2.

Change History (5)

comment:1 in reply to:  description Changed 12 years ago by jesse

Some more info..

alert($('<span>').length); alerts 0 in IE

I've traced it down to jQuery.clean, which wraps the <span> with the following:

div<div><span></div>

which IE interprets as:

div<DIV><SPAN></DIV></SPAN>

and when div.lastChild is thus <SPAN> which has no children.

I recommend either checking for this scenario and fixing it (like is done with XHTML-style tag), or finding some magical workaround which forces IE to add the closing tag in the right place.

Or maybe the div<div></div> is only used when <link> or <script> tags are present?

comment:2 Changed 12 years ago by jesse

It seems wrapping with a table instead of a <div> might be okay. So instead of:

jQuery.browser.msie &&

[1, "div<div>", "</div>"]

it would be:

jQuery.browser.msie &&

[4, "<table><tbody><tr><td>", "</td></tr></tbody></table>"]

Not sure if this causes other issues with links and scripts or whatnot...

comment:3 Changed 12 years ago by arrix

jesse, jQuery is designed to accept valid html. Try $('<span/>'), it works in IE as well as other browsers.

comment:4 Changed 12 years ago by john

Resolution: worksforme
Status: newclosed
Version: 1.1.41.2

Jesse - Arrix is correct, you need to use valid HTML/XHTML - otherwise issues will occur. It happened to work previously, by chance, for some tags - but fails for others. The current solution works for all tags, in all browsers.

comment:5 Changed 8 years ago by mriffault

Just posting an update about this issue, and provide a test case. This issue occur when trying to create an INLINE element WITH attributes. Without attributes, it works great. Using self-closing (slash) tag as mentioned in this ticket solve the issue too.

http://jsfiddle.net/aZZPj/3/

Note: See TracTickets for help on using tickets.