时间戳

首页 > 解决方案 > 如果由类初始化，则 select2 触发两次

jquery - 如果由类初始化，则 select2 触发两次

问题描述

我有几个使用按钮动态生成的选择，所以我只能按类识别它。问题是当select2:selectevent被触发时，如果被触发 N 次就会发出警报，而不仅仅是我更改了值的地方。

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

<a id="add">Add new</a>

 <div id="container">
 </div>


$(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').select2({
    width: '100%'
  }).on('select2:select', function(e) {
    var id = e.params.data.id;
    alert(id);
  });

  });

});

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

标签： jqueryjquery-select2

解决方案

您使用的解决方案涉及迭代所有选择元素，然后选择您尝试定位的元素，您可以避免使用.each(). 您可以使用 acounter来避免这种情况，并且只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>

推荐阅读