How do I explicitly execute default action from jQuery event

Question

Following up from this question, I\'m trying to implement an unobtrusive confirm dialog.

$(document).ready(function () {
    $(\"[data-confirmPrompt]\").clic         


        

Answer 1

Using the suggestion Alexey Lebedev made in his second comment, my current implementation now looks like the sample below, except that I've also added my own implementation of localization for the button labels.

Notes:

• I'm now using a jqueryUI dialog widget
• Note the use of .delegate so that the handler is "ajax-aware", i.e. works on elements added to the DOM after the page is loaded, e.g. as a result of an AJAX call
• Uses a flag to prevent recursion when the user clicks Yes on the confirm dialog.
• Uses jquery 1.6.4 and jquery-ui-1.8.16

If anyone can suggest improvements, please chime in.

<!-- Examples of usage -->
<input type='submit' data-confirm="OK to delete customer 123?" ... />
<a href="..." data-confirm="OK to navigate?" ... />

<!-- Implementation -->
<script type="text/javascript">
    var confirmClickHandler = function (event) {
        if ($(event.currentTarget).data('isConfirming')) return;
        var message = event.currentTarget.attributes['data-confirm'].value;
        event.preventDefault();
        $('<div></div>')
                .html(message)
                .dialog({
                    title: "Confirm",
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");
                            $(event.currentTarget).data('isConfirming', true);
                            event.currentTarget.click();
                            $(event.currentTarget).data('isConfirming', null);
                        },
                        "No": function () {
                            $(this).dialog("close");
                        }
                    },
                    modal: true,
                    resizable: false,
                    closeOnEscape: true
                });
    };

    $(document).ready(function () {
        $("body").delegate("[data-confirm]", "click", confirmClickHandler);
    });
</script>

Answer 2

I'm doing something similar and this works fine for me:

$('#link').click(function(e){
    if(!confirm('Are you sure you want to asdf?')){
        e.preventDefault();
    }
});

Answer 3

I was able to achieve this by calling event.stopPropagation() from a more specific context, and ensuring that I don't call event.preventDefault(). While you can't call the default action explicitly, you can set up the conditions so that the default action happens — and do as little or as much else as you wish.

    // Normal event handler
    $("[data-toggle]").click(ev => {
      switchToTab(ev.currentTarget)
      ev.preventDefault()
    })

    // Allow default handler in a specific case.
    $("[data-toggle] ul a").click(ev => {
      // Don't bubble the event to the less specific handler, above
      ev.stopPropagation()
      // An incorrect return value will also cancel the default action.
      return true
    })

Answer 4

I honestly don't know if this answers your question, but it might help a bit.

Consider the following HTML:

<button onclick="alert('Hello world!');" class="btn">Test 1</button>
<button onclick="alert(this.className);" class="btn">Test 2</button>

I've added the following to my $(document).ready:

$('button').each(function() {
    var btn = $(this);
    var onClick = btn.attr('onclick');

    //replace this with _this
    onClick = onClick.replace(/this/g, "_this");

    btn.attr('onclick', '');

    btn.click(function() {
        if (confirm('Do it?')) {

            //set _this first!
            var _this = btn[0];

            eval(onClick);
        }
    });
});

It seems to get the job done. Check this jsFiddle example: http://jsfiddle.net/KeesCBakker/4jThg/.

EDIT
I've created something that looks more like your question: http://jsfiddle.net/KeesCBakker/hqLH5/. Just couldn't figure out which $.prompt plugin your were using, so I grabbed the first one I've found from github (this one only works in Chrome :S).