JQuery : Add a confirm handler with bind/on and trigger functions

Question

I'm trying to add a confirm box to many links, button, or inputs, on the click event.

I can't use location.href, submit(), or other specific features because :

• location.href, for example, won't work on a submit button,
• location.href, for example, won't trigger other bound handlers.

So what I need to use is the trigger() function, that theorically execute all the handlers AND the native action. The "difficult" part is to execute all handlers, EXCEPT the handler which pop the confirm box.

Here is my code :

$('a, button, input[type="submit"]').each(function() {

    var oButton = $(this);

    oButton.on('click.pending', function(oEvent) {
        console.log('click !');
        oEvent.preventDefault();

        var oDialog = $('<div class="dialog-example">[Question] ?</div>').dialog({
            buttons: {
                Cancel: function() {
                    console.log('cancelled !');
                    // Nothing to do
                    oDialog.dialog('close');
                },
                Ok: function() {
                    console.log('confirmed !');
                    // Trigger the rest of the handlers AND the native action, BUT not this one, so this dialog is not used
                    // Problem : nothing happens here
                    oButton.trigger('click.confirmed');
                    oDialog.dialog('close');
                }
            }
        });
    });

});

Thanks in advance ! ;)

Answer 1

You should try:

oButton.off('click.pending').trigger('click').get(0).click();

DEMO