初始化动态创建的select2

Question

我有一个select2下拉列表,我提供了一个匹配器功能.它在初始页面加载时初始化为:

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

这适用于初始页面加载.

现在,我有额外的下拉菜单(select动态创建的元素(通过AJAX拉入,即jQuery(match).load(url).这些额外的下拉菜单不会作为select2小部件进行初始化,这是可以理解的,即使它们与原始的select2选择器匹配).

那么,我怎样才能告诉jQuery将这些动态创建的select元素视为需要初始化的select2项？我可以在匹配元素上设置某种"监视",这样每次匹配元素添加到页面时,select2初始化都会启动吗？

我记得live()前一段时间在jQuery中引入过,如果我正确理解了匹配元素,它们会在创建之前支持它们.我从未使用过该功能,现在看来已弃用.但它确实感觉像我正在寻找的那种东西.

这是一个WordPress插件,目前使用jQuery v1.11.2.

Answer 1

您可以尝试 DOMNodeInserted并查找您要分配的选择或课程

演示

$('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>

Answer 2

我最近遇到了类似的情况,但是以一种非常平常的方式做到了:

$(document).ready(function() {

 //function to initialize select2
  function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
      width: "80%",
      tags: true
    });
  }


 //onload: call the above function 
  $(".select-to-select2").each(function() {
    initializeSelect2($(this));
  });

 //dynamically added selects

  $(".add-new-select").on("click", function() {
    var newSelect = $("<select class='select-to-select2'  multiple><option>option 1</option><option>option 2</option></select>");
    $(".select-container").append(newSelect);
    initializeSelect2(newSelect);
  });


});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<div class="select-container">
  <select class='select-to-select2' multiple>
    <option value='1'>option1</option>
    <option value='2'>option2</option>
  </select>

  <select class='select-to-select2' multiple>
    <option value='1'>option1</option>
    <option value='2'>option2</option>
  </select>

</div>
<div>
  <button class="add-new-select">Add New Select</button>
</div>

如果.load函数找到所有要在load函数的回调中初始化的select元素,并在每个select元素上调用initializeSelect2.

我希望这有助于寻找简单解决方案的人.

Answer 3

这个对我有用

<div id="somediv">
    <select class="component">
    ...
    </select>
</div>



<script>
    $(document).on('click', '#addComponent', function () {

        $('#somediv').append(data); //data is my new select
        $('.component:last').select2();
    });
</script>