select2.js 保留之前点击的项目，这会导致在确认弹出窗口中删除多个项目

Question

我有一个文本框，我可以使用 select2.js 在其中添加和删除项目。现在我有一个要求，当我从文本框中删除项目时，它应该要求一些确认消息。

为此，我需要更改 select2.js 的 unselect() 方法。下面是我修改过的代码。

unselect: function (b) {
    var $curelm = this;
    var d = "", e= "", c = "";
    confirmpopup("Confirm", "Are you sure you want to remove this Tag?", function (confirm) {   //  <-- Here i have added confirmpopup code
        if (confirm) {
            c = $curelm.getVal();
            if (b = b.closest(".select2-search-choice"), 0 === b.length) throw "Invalid argument: " + b + ". Must be .select2-search-choice";
            if (d = b.data("select2-data")) {
                var f = a.Event("select2-removing");
                if (f.val = $curelm.id(d), f.choice = d, $curelm.opts.element.trigger(f), f.isDefaultPrevented()) return !1;
                for (;
                    (e = p($curelm.id(d), c)) >= 0;) c.splice(e, 1), $curelm.setVal(c), $curelm.select && $curelm.postprocessResults();
                return b.remove(), $curelm.opts.element.trigger({
                    type: "select2-removed",
                    val: $curelm.id(d),
                    choice: d
                }), $curelm.triggerChange({
                    removed: d
                }), !0
            }
        }
    });
},

我准备了一个JS Fiddle来告诉你我的问题。

当我在框中单击 "x"（删除符号）时，它会打开一个确认弹出窗口，如果我在该弹出窗口中单击 "Yes" 按钮，它将完全删除项目从框中，当我单击 "No" 按钮时，它不会删除项目。到目前为止一切都很好。现在出现问题，当我第二次单击框中的 "x" 并单击 "Yes" 按钮时，它将从框中删除 2 个项目，而不是仅删除选定的项目。我不知道为什么，但它会保留以前点击的项目历史记录（我猜）。

任何人都可以指出我在上面的代码中做错了什么吗？

要在 JS Fiddle 中生成问题，请按照以下步骤操作：

Select超过两项。
单击所选项目上的 "x" 按钮，然后在确认弹出窗口中单击 "No" 按钮。
现在再次单击另一个项目上的 "x" 按钮，现在单击确认弹出窗口中的 "Yes" 按钮。
它将删除两项而不是只删除一项。

NOTE: I have added the whole select2.js code in JS Fiddle rather than add it in external link because i have made change in its unselect method.

Answer 1

好的，在对我的代码进行深入挖掘后，我得到了解决方案。 confirmpopup() 函数中的问题。当我点击要从 select2 框中删除的项目时，我已经为 "Yes" 按钮注册了点击事件。然后我再次单击另一个项目以从 select2 框中删除，然后再次 "Yes" 和 "No" 按钮事件在 DOM 中注册了确认弹出窗口。所以这就是 "Yes" 按钮点击事件被调用 2 次的原因。

所以为了克服这个问题，我必须首先取消绑定点击事件使用.Off()方法在下面的代码中。

function confirmpopup(title, message, callbackfunc) {
    $('#errorlabel').text(title);
    $('#popupmessage').text(message);
    $('#modelconfirm').show();

    $('#btnyes').off('click'); // <-- Solution is here

    $('#btnyes').on('click', function () {
        $('#modelconfirm').hide();
        callbackfunc();
    });

    $('#btnno, .close').on('click', function () {
        $('#modelconfirm').hide();
    });

}

select2.js 保留之前点击的项目，这会导致在确认弹出窗口中删除多个项目

select2.js maintain previously clicked items which results in remove more than one items on confirmation popup

html

javascript

jquery

jquery-select2

select2