覆盖JQuery先前的回调函数

Question

I am having this problem with a callback function. I have this function to display an alert message, and it has a callback (okcallback) to be executed if it is provided:

function ErrorAlert(msg,okcallback) {

    ISAPP.ui.loader_modal_header.html('<h4 class="modal-title">'+ label.alertLabel +'</h4>');
    ISAPP.ui.loader_modal_body.html(msg);
    ISAPP.ui.loader_modal_footer.html('<div class="clearfix ">' +
              '<a id="modal-alert-close" class="btn green pull-right">' +
                '<label>'+ label.acceptLabel +'</label>' +
                ' <i class="fa fa-check-circle"></i>' +
              '</a>' + 
            '</div>');
    ISAPP.ui.loader_modal_header.show();
    ISAPP.ui.loader_modal_body.show();
    ISAPP.ui.loader_modal_footer.show();
    ISAPP.ui.loader_modal.modal('show');

    $(document).on('click','#modal-alert-close',
            function(){
                ISAPP.ui.loader_modal_footer.html('');
                ISAPP.ui.loader_modal.modal('hide');
                if(okcallback){
                    okcallback();
                }
            }
    );      
}

It is working fine when I use it with callback or no callback at first execution of the function. But when it is being executed the 2nd time, whatever the callback on the previous execution will carry over to the 2nd execution even though there's no callback function on the 2nd execution.

Sample:
1st execution (will go to blank after closing the message)

ErrorAlert("Pincode has been sent to " + email,
            function(){
                location.href = "#/blank";  
            }
    );

2nd execution (should not do anything after closing message)

ErrorAlert("Username is mandatory");

But what's happening is, the function still goes to "#/blank" which means it runs the previous callback function. Why is this happening? How do I prevent this from happening?

Thank you.

Answer 1

I'll assume you don't have multiple times the same id in your page, that is your first dialog is being closed before you open a new one.

You could unbind using off but there's no reason to use delegation here. A simple solution would be to bind to your newly added element instead of the whole document. This way, the binding will be removed with the element.

Replace

$(document).on('click','#modal-alert-close'

with

$('#modal-alert-close').on('click',