Select2 不适用于 JS 生成的元素

Question

我在我的项目中使用 Select2。我的问题是 select2:select事件无法处理 JS 生成的元素。

我创建了这个片段，所以你可以测试我说的内容。

var i = 0,
  data = [
     { 
       id: 0, 
        text: 'Bob' 
      },
      { 
       id: 1, 
        text: 'Martin' 
      },
      { 
       id: 2, 
        text: 'John' 
      }
  ];
    $('#in-9').select2({
     data: data
    });
    
    // Button click event
$('#append').on('click', function () {
 var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>';
  
  // Append HTML to Body
 $('body').append(html);
  
  // Assign data to input
  $('#in-' + i).select2({
   data: data
  });
  
  // Increase counter
  i++;
 
});

// Trigger "select" on select2 only works in first element.
$('.in').on('select2:select', function() {
 alert('wii');
});

<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.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<button id="append">Append to Body</button>

<!-- First element -->
<p>
  <label for="in-9'">Select2 #9:</label><br>
  <input id="in-9" class="in"><br>
</p>

您可以在 fiddle 中看到带有 id="in-9" 的 HTML 元素是在 HTML 中创建的，但是当单击 Append to Body 时 Javascript 函数被调用，生成的元素不能像第一个那样触发 select2:select 事件。

所以我的问题是，如何在动态生成的元素上调用 select2:select 事件？

Answer 1

可以使用jQuery的on()方法！

The .on() method attaches event handlers to the currently selected set of elements or dynamically generated elements in the jQuery object

你可以试试这个：

$('body').on('select2:select', '.in', function() {
    alert('wii');
});

看看下面的片段：

var i = 0,
  data = [
     { 
       id: 0, 
        text: 'Bob' 
      },
      { 
       id: 1, 
        text: 'Martin' 
      },
      { 
       id: 2, 
        text: 'John' 
      }
  ];
    $('#in-9').select2({
     data: data
    });
    
    // Button click event
$('#append').on('click', function () {
 var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>';
  
  // Append HTML to Body
 $('body').append(html);
  
  // Assign data to input
  $('#in-' + i).select2({
   data: data
  });
  
  // Increase counter
  i++;
 
});

// Trigger "select" on select2 only works in first element.
$('body').on('select2:select', '.in', function() {
 alert('wii');
});

<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.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<button id="append">Append to Body</button>

<!-- First element -->
<p>
  <label for="in-9'">Select2 #9:</label><br>
  <input id="in-9" class="in"><br>
</p>

希望对您有所帮助！

Select2 不适用于 JS 生成的元素

Select2 not working on generated elements by JS

html

javascript

jquery

select2