Question

我使用按钮进行了几次dinamically生成选择，所以我只能通过课堂识别它。问题是，当created()被触发时，如果触发N次，则发出警报，而不仅仅是我更改值的位置。

如何解决这个问题？（我只能按类分配init插件，没有唯一的id）

select2:selectevent

更新我的真实案例：https://jsfiddle.net/1jaw6d1x/3/

Answer 1

您使用的解决方案涉及迭代所有选择元素，然后选择您尝试定位的元素，您可以避免使用.each()迭代所有选择。您可以使用counter来避免这种情况，并且只将select2绑定在新元素上一次。

这样你就不必迭代所有的选择，你就已经有了要从集合中选择的元素的索引，想象在第51个时候添加50个或更多的选择选择它.each()会迭代所有50个首先然后到达第51个然后绑定select2。

var objectS = $(".idFolder");

var currentSelect=    $(objectS[count]);

见下面的演示

var count = 0;
$(document).ready(function() {

  $("#add").on("click", function(e) {
    e.preventDefault();

    $("#container").append('<select class="idFolder" name="idFolder[]"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select>');
    var objectS = $(".idFolder");
    var currentSelect = $(objectS[count])

    currentSelect.select2({
      width: '100%'
    }).on('select2:select', function(e) {
      var id = e.params.data.id;
      alert(id);
    });
    count++;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<a id="add">Add new</a>

<br><br>

<div id="container">


</div>

Answer 2

解决：

$(document).ready(function() {

  $("#add").on("click", function(e){
  e.preventDefault();

    $("#container").append('<select class="idFolder" name="idFolder[]"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select>');

    $('.idFolder').each(function(){

      if ($(this).hasClass("select2-hidden-accessible")) {
          // Select2 has been initialized
      } else {

      $(this).select2({
      width: '100%'
      }).on('select2:select', function(e) {
      var id = e.params.data.id;
      alert(id);
      });

      }

    });

  });

});

如果按类初始化，则select2触发两次

2 个答案: