通过类初始化Select2时事件重复触发的解决方法

这个问题的核心是重复绑定事件导致的——每次点击"Add new"时，你都给所有已存在的.idFolder元素重新绑定了一遍select2:select事件，元素越多，绑定的次数就越多，触发时自然会执行N次弹窗。

给你两种解决思路，第二种更推荐：

方案1：仅给新添加的元素绑定事件 #

每次创建新的select元素后，只对这个新元素初始化select2并绑定事件，而不是遍历所有.idFolder：

$(document).ready(function() {
  $("#add").on("click", function(e){
    e.preventDefault();
    // 先创建新元素并暂存
    const newSelect = $('<select class="idFolder" name="idFolder[]"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select>');
    $("#container").append(newSelect);
    // 只处理这个新元素的select2初始化和事件绑定
    newSelect.select2({ width: '100%' }).on('select2:select', function(e) {
        const id = e.params.data.id;
        alert(id);
    });
  });
});

方案2：使用事件委托（更高效） #

把事件绑定到父容器#container上，利用事件冒泡来处理所有动态生成的.idFolder元素的事件。这种方式只需要绑定一次事件，不管后续添加多少元素都能生效，性能更好：

$(document).ready(function() {
  // 事件委托：父容器监听所有子元素中.idFolder的select2:select事件
  $("#container").on('select2:select', '.idFolder', function(e) {
      const id = e.params.data.id;
      alert(id);
  });

  $("#add").on("click", function(e){
    e.preventDefault();
    const newSelect = $('<select class="idFolder" name="idFolder[]"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select>');
    $("#container").append(newSelect);
    // 仅初始化新元素的select2，无需重复绑定事件
    newSelect.select2({ width: '100%' });
  });
});

为什么推荐方案2？因为它从根源上避免了重复绑定的问题，减少了不必要的事件监听，尤其是当你需要添加大量select元素时，这种方式的内存占用更低，代码结构也更清晰。

内容的提问来源于stack exchange，提问作者Giuseppe Lodi Rizzini