Skip to main content

Bug Tracker

Side navigation

#1587 closed bug (worksforme)

Opened September 11, 2007 04:33PM UTC

Closed September 15, 2007 03:02AM UTC

Last modified August 03, 2012 08:26AM UTC

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.

Attachments (0)
Change History (5)

Changed September 11, 2007 04:59PM UTC by jesse comment:1

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?

Changed September 11, 2007 05:16PM UTC by jesse comment:2

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...

Changed September 11, 2007 05:20PM UTC by arrix comment:3

jesse, jQuery is designed to accept valid html.

Try $('<span/>'), it works in IE as well as other browsers.

Changed September 15, 2007 03:02AM UTC by john comment:4

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.

Changed August 03, 2012 08:26AM UTC by mriffault comment:5

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/