CODEWITHSUNDEEP
jqueryinternet-explorer
mark
mark

Reputation: 62774

Why jQuery.after does not work on IE9?

http://jsfiddle.net/mark69_fnd/DyRCZ/:

On Chrome:

enter image description here

On IE9:

enter image description here

I am using jQuery 1.8.0

Now, I know that IE9 sucks, but IE is one of the 5 major browsers and jQuery is supposed to isolate the developer from the "peculiarities" of IE, isn't it?

So, what is wrong?

Thanks.

P.S.

I know the IE subject invites to certain kind of talk, but please - be constructive.

EDIT

To all those claiming an array of strings is not working. jQuery 1.8.0 supports it, otherwise it would not have worked neither on Chrome nor on Firefox. But it does on both of them! The only problem is with IE9, which means jQuery 1.8.0 after() API is broken there.

EDIT2

I think jQuery 1.8.0 has more problems with after() even on Chrome. For instance, should the below work?

$('#itemsHeader').after("         
                        <tr><td>a</td></tr>");​

http://jsfiddle.net/mark69_fnd/Nw8Hz/

And what about:

$('#itemsHeader').after("         <tr><td>a</td></tr>");​

The answer is that the former does not work, but the latter works! From the html perspective both are identical and should work. But it does not even on Chrome.

EDIT3

I am stupid. Yes I am.

Upvotes: 0

Views: 1806

Answers (3)

nbrooks
nbrooks

Reputation: 18233

The .after() API supports an array of DOM elements, not explicitly an array of html strings. Just use simple string concatenation:

http://jsfiddle.net/DyRCZ/11/

var i, rows = "";

for (i = 0;i < 4; i += 1){
    rows += '<tr><td colspan="2">This is item ' + i + '</td></tr>';
}
$('#itemsHeader').after(rows);​

jQuery docs explaining arguments

Additional Arguments - Similar to other content-adding methods... .after() also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

As is explicitly stated here, an array of strings is not a supported parameter of the method. Just because it is working in chrome, does not mean it is an intentional and reliable feature. jQuery standardizes it's intended behavior across browsers. Undocumented features can go one way or the other, depending on how the browser's specific js implementation handles a case.

Upvotes: 1

Tim Withers
Tim Withers

Reputation: 12059

On IE9 http://jsfiddle.net/DyRCZ/3/

I got it working just fine on IE9. You are passing an array, and not the string of text. Try joining the array into a string and passing it and you will be fine.

Also, if you want to continue using the array of ELEMENTS, you must create them as such:

http://jsfiddle.net/DyRCZ/10/

rows.push($("<tr/>").html('<td colspan="2">This is item ' + i + '</td>'));

Upvotes: 0

kapa
kapa

Reputation: 78691

The jQuery documentation does not state that an array of HTML strings is supported as input.

.after( content [, content] )

content HTML string, DOM element, or jQuery object to insert after each element in the set of matched elements.

content One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert after each element in the set of matched elements.

EDIT: OK, after looking at it again, it can be read in a way that means an array of HTML strings, but I think that is not the way to read it. In this case the documentation is ambiguous and should be fixed.

Upvotes: 1

Related Questions