初始化动态创建的select2

Jason 发表于 Dev

杰森

我有一个select2下拉菜单，为此我提供了一个匹配器功能。它是在初始页面加载时初始化的：

jQuery(document).ready(function() {
    jQuery(".my_select2").select2({
        matcher: function(term, text) {...}
    });
});

这可以在初始页面加载时找到。

现在，我还有其他的下拉列表（select动态创建的元素（通过AJAXjQuery(match).load(url)插入）。这些额外的下拉列表不会被初始化为select2小部件，这是可以理解的，即使它们与原始的select2选择器匹配也是如此。

因此，如何告诉jQuery将这些动态创建的select元素视为需要初始化的select2项？我可以在匹配元素上设置某种“监视”功能，以便每次将匹配元素添加到页面时都会启动select2初始化吗？

我记得live()前一段时间在jQuery中被介绍过，如果我正确理解的话，它支持在创建匹配元素之前。我从未使用过该功能，现在似乎已弃用。但这确实像我正在寻找的东西。

这是针对WordPress插件的，目前使用jQuery v1.11.2。

胡安

您可以尝试DOMNodeInserted并为其选择select或class

演示版

$('body').on('DOMNodeInserted', 'select', function () {
    $(this).select2();
});

更新

DOMNodeInserted

不推荐使用此功能已从Web标准中删除。尽管某些浏览器可能仍支持它，但是它正在被删除。避免使用它，并尽可能更新现有代码；

建议的方法将是这样的 MutationObserver

$(function() {
  $("button").on("click", function() {
    $("#dynamic-container").append($("<select><option>test</option><select/>"));
  });

  // select the target node
  var target = document.getElementById('dynamic-container');

  if (target) {
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      //loop through the detected mutations(added controls)
      mutations.forEach(function(mutation) {
      //addedNodes contains all detected new controls
        if (mutation && mutation.addedNodes) {
          mutation.addedNodes.forEach(function(elm) {
          //only apply select2 to select elements
            if (elm && elm.nodeName === "SELECT") {
              $(elm).select2();
            }
          });
        }
      });
    }); 
    
    // pass in the target node, as well as the observer options
    observer.observe(target, {
      childList: true
    });

    // later, you can stop observing
    //observer.disconnect();
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>


<button>Add new select</button>
  <div id="dynamic-container">

  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。