如何将按钮放入 select2 结果项并处理其点击？

Question

我试图在 select2 结果项中放置一个按钮（以允许用户删除项）。我设法放置了按钮，但我还没有设法处理它们的点击事件。不知何故，事件没有被引发。我认为这类似于 select2 在我的按钮的点击事件引发之前关闭下拉菜单，但无法弄清楚如何让它工作。

这是我现在拥有的片段。

...    
formatResult: function (item) {
    return item.text + "<button class='btn btn-xs btn-default pull-right select2-result-button' data-id='" + item.id + "'>&times;</button>";
}
...
$(document).on("click", ".select2-result-button", function (e) {
    alert("clicked: " + $(this).data("id"));
    e.preventDefault();
    e.stopPropagation();
    return false;
});

这是一个演示fiddle。我也尝试过 mousedown 事件但没有成功。

Answer 1

您应该看看这个答案：stackoverflow.com/a/15637696/1127669：

select2

库会阻止弹出列表上的任何点击事件。

但是您可以像这样重新定义

onSelect

事件：jsfiddle.net/qouo8uog/33.

s2list.onSelect = (function (fn) {
    return function (data, options) {
        var target;

        if (options != null) {
            target = $(options.target);
        }

        // In case where the target is your own button, handle it
        if (target && target.hasClass('select2-result-button')) {
            alert("clicked: " + $(target).data("id"));
        } else {
            return fn.apply(this, arguments);
        }
    }
})(s2list.onSelect);

Answer 2

在一天结束时，我决定修补 select2 源代码而不是修改选项。可能值得在 github 项目上拉取请求，但目前我没有时间准备它。

在两个 onSelect 实现（单个和多个）中，我都将这段代码放在前面。

onSelect: function (data, options) {

      // @@ implement a way to be able to place buttons in results
      // this will check if there is an event target (in case when selection is invoked by mouse/touch), and if the target is a result button, trigger the result button event on the element, and skip default selecting behaviour
      if (options && options.target && $(options.target).hasClass('select2-result-button')) {
        var evt = $.Event("select2-result-button-click", { choice: data, button: options.target });
        this.opts.element.trigger(evt);
        return;
      }
      ...
}

Answer 3

只需添加

closeOnSelect: false

按钮会起作用。