在附加的选择字段上使用select2时，最大调用堆栈大小超过了

Question

我正在附加一个包含选择输入的div，但是当我尝试在其上初始化select2时，我会遇到此错误，并且我的页面在强制强制后才响应。<<<<<<<<<<<<<<<</p>

$('.page-content').on('DOMNodeInserted', '.material-container', function () {
    var selectField = $(this).find(".select-material");
    selectField.select2();
});

这是控制台错误。

jquery.js?27d9:5946 Uncaught RangeError: Maximum call stack size exceeded.
at HTMLSelectElement.eval (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:5946:21)
at domManip (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:5759:14)
at jQuery.fn.init.after (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:5944:10)
at jQuery.fn.init.jQuery.fn.(anonymous function) [as insertAfter] (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:6052:37)
at Select2._placeContainer (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:163:1), <anonymous>:5137:16)
at new Select2 (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:163:1), <anonymous>:5063:10)
at HTMLSelectElement.eval (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:163:1), <anonymous>:5667:26)
at Function.each (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:368:19)
at jQuery.fn.init.each (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:71:1), <anonymous>:157:17)
at jQuery.fn.init.$.fn.select2 (eval at <anonymous> (http://crm.dev:3000/js/vendor.js:163:1), <anonymous>:5664:14)
at HTMLDivElement.eval (eval at <anonymous> (http://crm.dev:3000/js/app.js:149:1), <anonymous>:51:17)

Answer 1

启动select2实例时，将大量的东西添加到dom，domnodeinserted事件被触发，然后您有一个无限的循环。

我有两种方法可以解决此问题（当然还有更多）：

• 检查select2是否已经初始化

  是否有任何方法可以检查一个元素是否已应用jQuery select2？

• 使用jquery One（）而不是on（）http://api.jquery.com/one/