jQuery 选择：未捕获的 NotFoundError：无法在“节点”上执行“appendChild”：答案

【问题标题】：jQuery Chosen: Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node':jQuery 选择：未捕获的 NotFoundError：无法在“节点”上执行“appendChild”：
【发布时间】：2015-11-06 11:56:34
【问题描述】：

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

我有一个 selected.js + jscrollpane.js。 When a chosen is open, the search input field must to be focused to write some search string.我第一次打开所选内容时会引发错误，并且我无法在其中搜索任何内容。但是，如果我关闭选择并重新打开它，一切正常。

我为你做了一个小提琴： http://jsfiddle.net/y2h3ohr3/2/

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

未捕获的 NotFoundError: 无法在 'Node' 上执行 'appendChild': 要删除的节点不再是该节点的子节点。也许它是在“模糊”事件处理程序中移动的？

控制台抛出的踪迹：

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

初始化@jquery.jscrollpane.min.js:115

JScrollPane@jquery.jscrollpane.min.js:1388

（匿名函数）@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

（匿名函数）@ selected.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

（匿名函数）@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.(匿名函数)@jquery-1.9.1.js:7403

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

Chosen.results_show@chosen.jquery.js:968

Chosen.container_mousedown @ selected.jquery.js:839

（匿名函数）@ selected.jquery.js:654

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

elemData.handle@jquery-1.9.1.js:2750

我做了一个小提琴，它的设计与我的项目中的不一样，但错误完美再现（第一次打开时请注意chrome控制台选择）。

你可以在这里查看小提琴：

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

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

【问题讨论】：

我可以附加更多信息，只告诉我和我分享你需要查看问题。谢谢
对我来说，在 Firefox 中它无论如何都不起作用。你能说一下你使用 jscrollpane.js 的原因吗？ selected.js 还不够吗？如果您在https://harvesthq.github.io/chosen/ 上解释您的方法与演示的不同之处，我将尝试在晚上实现。
这是一个奇怪的客户端规范。必须使用 jscrollpane。是的，这很粗鲁，一团糟，你想到的所有形容词都是我想的。但我无法删除它。如果你看到小提琴，在选择的代码中被修改为使用 jscrollpane，所以它与原来的选择不同。一步一步调试比较好，但我做到了，我不知道问题出在哪里。如果您需要具体信息，请告诉我。谢谢！！
我刚刚提到它与 demo 中的 selected.js 一起工作得很好。所以我试图理解差异。它有区别还是应该与您的自定义js一起使用？
是的，选择的自定义有很多不同。有很多人修改，所以代码和原来的choose.js不一样。我认为这个问题是由 jscrollpane 引起的，但我看不到错误本身。

标签： javascript jquery jscrollpane jquery-chosen prototype-chosen

【解决方案1】：

发生这种情况是因为在您的小提琴中的第 115 行：

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

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

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

Updated fiddle

【讨论】：

不幸的是，这仅在我第一次打开所选内容时有效。下一次它不起作用......这很奇怪，因为在小提琴中工作正常。在@Taleeb 解决方案中也是如此。

【解决方案2】：

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

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

见jsFiddle here

【讨论】：

不是现在，错误消失了，没关系。但行为仍然很奇怪