стрельба select2 дважды, если инициализируется классом - PullRequest
Новая
       8

стрельба select2 дважды, если инициализируется классом

0 голосов
/ 17 мая 2018

У меня есть несколько динамически созданных выборок с помощью кнопки, поэтому я могу идентифицировать их только по классам. Проблема заключается в том, что когда срабатывает select2:selectevent, выдается предупреждение, если срабатывает N раз, а не только там, где я изменил значение.

Как это решить? (Я могу назначить плагин инициализации только по классу, без уникального идентификатора) 

<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/

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Решение, которое вы использовали, включает в себя итерацию по всем элементам выбора, а затем выбор того, на который вы пытаетесь нацелиться, вы можете избежать итерации по всем выборам, используя .each().Вы можете использовать counter, чтобы избежать этой ситуации и связывать select2 только один раз только с новым элементом.

Таким образом, вам не нужно будет повторять все выборки, и у вас уже будет индекс элемента для выбора из коллекции, представьте, что добавление 50 или более выборок в 51-й выбор это .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>
0 голосов
/ 17 мая 2018

Решено: 

$(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);
      });

      }

    });

  });

});
...