javascript - jQuery 选择 : 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

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

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

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

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

Updated fiddle