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

Question

我有一个无法自己解决的问题。我调试了几天，但没有成功找到问题所在。

我有一个 chosen.js + jscrollpane.js。当一个选项打开时，搜索输入字段必须被聚焦以写入一些搜索字符串。我第一次打开所选内容时会引发错误，我无法在其中搜索任何内容。但是如果我关闭选择的并重新打开它，一切正常。

我给你做了一个fiddle： http://jsfiddle.net/y2h3ohr3/2/

所以当我第一次打开选择时的错误我可以在 Chrome 的控制台中看到这个错误（在 firefox 中，错误存在但控制台不会抛出错误）：

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?

控制台抛出的痕迹：

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

我做了一个fiddle，设计和我的项目不一样，但是错误重现完美（第一次打开时注意chrome控制台）。

您可以在此处查看 fiddle：

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

谁能帮帮我？我被卡住了，我不能做更多，因为我没有在任何地方发现错误。错误是由 jquery 抛出的，而不是选择的，所以我没有自定义 appendChild.

Answer 1

问题似乎出在以下行中： pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children());

而不是 append 它应该是 appendTo 因为 div.jsPane 被添加到现有元素。 pane = $('<div class="jspPane" />').css('padding', originalPadding).appendTo(elem.children());

见jsFiddle here

Answer 2

发生这种情况是因为在您的 fiddle 的第 115 行：

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

您尝试将 elem.children() 附加到您的窗格，但是当您 select 在您的 select 中添加某些内容时，您的子元素会发生变化。所以 jQuery 尝试删除并添加一个不再存在的子项。一个快速的解决方案是克隆 elem.children，将它们存储在一个 var 中并附加克隆的子项。像这样：

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

Updated fiddle

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

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

javascript

jquery

jscrollpane

jquery-chosen

prototype-chosen