如何为Select2 JS自定义渲染的新增按钮绑定点击事件

下面是3种常用的可落地实现方案：

方案1：事件委托绑定（最通用，无需修改原有渲染逻辑） #

因为Select2的下拉选项是动态插入到DOM中的，直接对按钮元素绑定事件不会生效，用事件委托绑定到静态存在的上层元素即可：

// 可替换document为你页面中固定存在的上层容器，性能更好
$(document).on('click', '.select2-results__option .add.btn', function(e) {
  // 必须加，阻止冒泡触发Select2默认的选项选中逻辑
  e.stopPropagation();
  // 此处写入你的自定义点击逻辑，示例：获取当前新增的内容
  const newItemText = $(this).closest('.select2-results__option').text().replace('+ Add New Item', '').trim();
  console.log('要新增的项内容：', newItemText);
})

方案2：templateResult 渲染时直接绑定事件 #

在渲染按钮的同时直接给jQuery元素绑定点击事件，不需要额外监听全局事件，修改你原有templateResult的逻辑即可：

templateResult: function (data) {
  var $result = $("<span></span>");
  $result.text(data.text);
  if (data.newOption) {
    // 先创建按钮的jQuery对象，再绑定点击事件
    var $addBtn = $("<button class='add btn btn-secondary btn-sm ml-10'> + Add New Item</button>");
    $addBtn.on('click', function(e) {
      e.stopPropagation();
      // 你的自定义逻辑，直接取data里的内容更方便
      console.log('要新增的项内容：', data.text, '项ID：', data.id);
    })
    $result.append($addBtn);
  }
  return $result;
}

方案3：监听Select2原生select事件（不需要绑定按钮） #

如果你的需求是用户点击整个新增选项区域都触发新增逻辑，可以直接用Select2自带的事件，不需要处理按钮绑定：

$('#my_select').on('select2:select', function (e) {
  var selectedData = e.params.data;
  // 判断当前选中的是不是新增的临时标签
  if (selectedData.newOption) {
    // 此处写入你的新增逻辑
    console.log('新增项：', selectedData.text);
    // 如果不需要把临时标签直接放到选择框里，可加下行阻止默认行为
    // e.preventDefault();
  }
});

注意：所有涉及到选项内点击的逻辑，都建议添加阻止事件冒泡的逻辑，避免和Select2本身的点击逻辑冲突。

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