Question

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

为此，我需要对unselect() select2.js方法进行更改。以下是我进行更改的代码。

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 中生成问题，请按照以下步骤操作：

选择两个以上的项目。
点击所选项目上的"x"按钮，然后点击"No"按钮确认弹出窗口。
现在再次点击其他项目的"x"按钮，然后点击确认弹出窗口中的"Yes"按钮。
它将删除两个项目而不是仅选择一个项目。

注意：我已在JS Fiddle中添加了整个select2.js代码，而不是将其添加到外部链接中，因为我已对其unselect方法进行了更改。

Answer 1

好的，我在深入挖掘代码后得到了解决方案。 confirmpopup()函数中的问题。当我点击要从select2框中删除的项目时，我已经为"Yes"按钮注册了点击事件。然后我再次点击另一个项目从select2框中删除，并再次在DOM中注册确认弹出窗口"Yes"和"No"按钮事件。所以这就是"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维护以前单击的项目，这会导致在确认弹出窗口中删除多个项目

1 个答案: