CODEWITHSUNDEEP
javascriptjquery
Blazemonger
Blazemonger

Reputation: 92903

Error in .map() when callback returns a jQuery object

http://jsfiddle.net/mblase75/NfzbA/ -- using jQuery 1.9.1

var $opts = $('.plant-page').map(function (i, el) {
    return $('<option>');
}).appendTo('#change-page select');

The error in the JavaScript console says: Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

When I switch to jQuery 1.8.3, result is as expected -- the option elements are appended to the select: http://jsfiddle.net/mblase75/NfzbA/2/

Am I doing something wrong?

Upvotes: 4

Views: 520

Answers (1)

Blazemonger
Blazemonger

Reputation: 92903

In jQuery 1.9.1, if I rewrite the .map() callback function to return a DOMelement instead of a jQuery object, it works as expected: http://jsfiddle.net/mblase75/NfzbA/3/

var $opts = $('.plant-page').map(function (i, el) {
    return $('<option>').text(this.id)[0];
}).appendTo('#change-page select');

When I submitted this as a jQuery bug (http://bugs.jquery.com/ticket/13567), I was told:

Resolution set to notabug

You are trying to append a jQuery object that is inside a jQuery object, since you inserted a jQuery object into said jQuery object via the $.fn.map(). This is not supported, but obvious enough. We generally don't make a list of everything that cannot be in a jQuery set because there is an infinite list of possibilities for doing it wrong. Your rewrite looks better.

So: even though this worked in jQuery 1.8, it's considered a reversion to expected behavior rather than a bug. .map() callbacks should always return DOMelements instead of jQuery objects.

Upvotes: 3

Related Questions