jQuery Chosen: Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node':

Question

I have a problem impossible to solve by myself. I am debugging this for several days but no success in found where is the problem.

I have a chosen.js + jscrollpane.js. When a chosen is open, the search input field must to be focused to write some search string. The first time that I open the chosen throws an error and I can't search anything inside it. But if I close the chosen and reopen it, all works fine.

I make a fiddle for you: http://jsfiddle.net/y2h3ohr3/2/

So the error when I open the first time the chosen I can see this error in Chrome's console (in firefox, the error exists but console doesn't throws error):

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

The trace that console throws:

jQuery.extend.buildFragment @ jquery-1.9.1.js:6541

jQuery.fn.extend.domManip @ jquery-1.9.1.js:6129

jQuery.fn.extend.append @ jquery-1.9.1.js:5949

initialise @ jquery.jscrollpane.min.js:115

JScrollPane @ jquery.jscrollpane.min.js:1388

(anonymous function) @ jquery.jscrollpane.min.js:1407

jQuery.extend.each @ jquery-1.9.1.js:648

jQuery.fn.jQuery.each @ jquery-1.9.1.js:270

$.fn.jScrollPane @ jquery.jscrollpane.min.js:1399

(anonymous function) @ chosen.jquery.js:774

jQuery.event.dispatch @ jquery-1.9.1.js:3074

elemData.handle @ jquery-1.9.1.js:2750

jQuery.event.special.focus.trigger @ jquery-1.9.1.js:3256

jQuery.event.trigger @ jquery-1.9.1.js:2952

(anonymous function) @ jquery-1.9.1.js:3677

jQuery.extend.each @ jquery-1.9.1.js:648

jQuery.fn.jQuery.each @ jquery-1.9.1.js:270

jQuery.fn.extend.trigger @ jquery-1.9.1.js:3676

jQuery.fn.(anonymous function) @ jquery-1.9.1.js:7403

$.fn.extend.focus @ jquery-ui.js:230

Chosen.results_show @ chosen.jquery.js:968

Chosen.container_mousedown @ chosen.jquery.js:839

(anonymous function) @ chosen.jquery.js:654

jQuery.event.dispatch @ jquery-1.9.1.js:3074

elemData.handle @ jquery-1.9.1.js:2750

I make a fiddle, the design it's not the same as in my project, but the error reproduces perfectly (pay attention to chrome console when open first time the chosen).

You can view the fiddle here:

http://jsfiddle.net/y2h3ohr3/2/

Can anyone help me? I'm stucked and I can't make more because I not found the error anywhere. The error is throwing by jquery, not the chosen, so I not made custom appendChild.

Answer 1

The problem seems to be in the following line: pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children());

Instead of append it should be appendTo as div.jsPane is being added to an existing element. pane = $('<div class="jspPane" />').css('padding', originalPadding).appendTo(elem.children());

See jsFiddle here

Answer 2

This happens because in line 115 in your fiddle:

pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children());

you try to append elem.children() to your pane, but when you select something in your select the children your elem change. So jQuery tries to remove and add a child that does not longer exist. A quick solution would be to clone the elem.children, store them in a var and append the cloned children. Like this:

var $children = elem.children().clone();
                    pane = $('<div class="jspPane" />').css('padding', originalPadding).append($children);

Updated fiddle