如何为动态追加/加载的新元素绑定Select2处理程序

核心原因 #

页面加载时执行的Select2初始化只会作用于当时已存在的DOM元素，通过append/load动态添加的新元素，不会自动触发初始化，这就是第二次追加的select未生效的原因。

解决方案：添加元素后手动初始化新元素 #

针对动态添加的select，必须在元素被插入DOM后，单独调用Select2的初始化方法。以下是两种常见场景的实现：

场景1：通过append创建并添加新select

$(document).ready(function() {
  // 初始化页面原有select
  $('.select2').select2();

  $('#add-btn').click(function() {
    // 构造新的select元素
    const newSelect = $('<select class="select2"><option value="1">选项1</option><option value="2">选项2</option></select>');
    // 追加到目标容器
    $('#container').append(newSelect);
    // 仅初始化刚添加的select
    newSelect.select2();
  });
});

场景2：通过load加载外部HTML片段

在load的回调函数中，对加载完成的新元素执行初始化：

$('#load-btn').click(function() {
  $('#container').load('your-fragment.html', function() {
    // 初始化加载进来的所有未绑定Select2的select
    $(this).find('.select2:not(.select2-hidden-accessible)').select2();
  });
});

关键注意事项 #

• 避免重复初始化：Select2初始化后会给元素添加select2-hidden-accessible类，可通过这个类筛选未初始化的元素，防止重复绑定报错。
• 效率优先：尽量只针对新添加的元素初始化，而非全局重新初始化所有.select2元素，减少不必要的DOM操作。

完整可测试示例 #

<div id="select-box">
  <!-- 页面原有select -->
  <select class="select2">
    <option value="old1">原有选项1</option>
    <option value="old2">原有选项2</option>
  </select>
</div>
<button id="add-new-select">添加新选择框</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<script>
$(document).ready(function() {
  $('.select2').select2();

  $('#add-new-select').click(function() {
    const newSelect = `
      <select class="select2" style="margin-top:10px;">
        <option value="new1">新增选项1</option>
        <option value="new2">新增选项2</option>
      </select>
    `;
    $('#select-box').append(newSelect);
    // 初始化最后一个添加的select
    $('#select-box .select2:last').select2();
  });
});
</script>

内容的提问来源于stack exchange，提问作者Vans