如何將一個按鈕放入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;
});

這是一個演示小提琴 。 我也嘗試了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;
      }
      ...
}