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
.
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
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.