select2.js 维护先前点击的项目，这导致在确认弹出窗口中删除多个项目

Question

I have one textbox in which i can add and remove items using select2.js . Now i have one requirement that when i remove item from textbox, it should ask for some confirmation message.

For that i need to make a change in unselect() method of select2.js . Below is the code in which i have made change.

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
            }
        }
    });
},

I have prepare one JS Fiddle to show you my problem.

When i click on "x" (Remove sign) in the box, it'll open one confirm popup and in that popup if i click on "Yes" button then it'll perfectly remove item from the box and when i click on "No" button, it'll not remove item. Upto now everything is fine. Problem is arise now, when second time i click on "x" in the box and click on "Yes" button then it'll remove 2 items from the box rather than remove only selected items. I don't know why, but it'll maintain previous clicked items history( I guess ).

Can any one point out what i have made wrong in the above code ?

To generate the issue in JS Fiddle follow below steps:

• Select more than two items.
• Click on "x" button on selected item and in confirm popup click on "No" button.
• Now again click on "x" button on another item and now click on "Yes" button on confirm popup.
• It'll remove two items rather than only selected one.

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

Okay, I got the solution after doing some deep digging in my code. The problem in confirmpopup() function. When i click on item to remove from select2 box at that time i have registered click event for "Yes" button. Then again i click on another item to remove from select2 box and again "Yes" and "No" button event registered of confirm popup in DOM. So this is the reason "Yes" button click event called 2 times.

So to overcome to this problem, i have to first unbind click event using .Off() method in the code like below.

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();
    });

}