wrapInner has no effect on IE8

[zackw@…]

demonstrates what I believe to be a bug with wrapInner and IE8. (The fiddle makes use of jquery.ui.accordion, but this is only because that's how I noticed; the bug is with wrapInner.)

For an accordion to work correctly, the elements selected by the "header" parameter to .accordion() must have contents that meet a particular structure. Since this structure is not semantically meaningful, I wanted to create it on the fly rather than write it into the HTML. I do this with a call to wrapInner immediately before the invocation of accordion(). This works correctly on every other browser I've tried, but IE seems to silently ignore the wrapInner call. You can see that this is the case by comparing the rendered result pane in IE to that in any other browser - in IE the accordion headings are narrower, and the text is being drawn on top of the twisty triangles.

[zackw@…]

I should probably have said that I have only tried this in IE8 but rather expect it is a generic IE bug.

[jitter]

This isn't bug as far as I'm concerned.

You pass in a string to wrapInner which isn't well formed HTML. Just changing it fixes your problem in IE. (Well atleast for me in IE6)

wrapInner("<a href=\"#\">") //doesn't work
wrapInner("<a href=\"#\" />") //works
wrapInner("<a href=\"#\"></a>") //works too

[zackw@…]

OK, but then you should make it clearer in the documentation that, when passing a string, tags must be closed. Right now, the only thing that even slightly implies that is an example,

$('.inner').wrapInner('<div class="new" />');

which, when I read that, I assume the /> is a pointless XMLism and using just an opening tag is supposed to work.

[jitter]

OK, but then you should make it clearer in the documentation

you who? I'm not on the jQuery team or anything like that. Just a user like you

[rwaldron]

thanks again jitter

[addyosmani]

I've just updated the docs on this as follows:

Note: When passing a selector string to the .wrapInner() function, the expected input is well formed HTML with correctly closed tags. Valid input includes:

$(elem).wrapInner("<div class='test' />"); $(elem).wrapInner("<div class='test'></div>"); $(elem).wrapInner("<div class=\"test\"></div>");

[zackw@…]

Replying to addyosmani:

I've just updated the docs on this as follows:

Note: When passing a selector string to the .wrapInner() function, [...]

"selector string" is CSS terminology; suggest "HTML fragment", or just "string". Otherwise this looks like a good change. Thanks.

[cd.wharton@…]

I think this bug is back - cannot get it to work in IE9 at all!