Question

Here is what I want to do: I have this handler that handles the clicking of a link:

$('body').on('click', 'a.ajax.get', function(e){
    e.preventDefault();
    $.get($(this).attr('href'), function(){alert('Success!');});
});

Later on I created this handler so I could ask for user confirmation before the action takes place:

$('body').on('click', 'a[data-confirmation]', function(){
   return confirm($(this).data('confirmation'));
});

This handler is placed at the top of my script

The markup that causes me problems is something like this:

<a href="do/something/there" class="ajax get" data-confirmation="Are you sure you want to do that?">
    Click me!
</a>

What I thought It would do is that when the user clicks “Cancel” on the confirmation box, the callback would return false and the event chain would stop. This doesn’t happen, and the link gets ‘clicked’ no matter what the user chooses in the confirmation box.

Am I doing something wrong, or this is not possible?

Answer 1

Try this

$('body').on('click', 'a[data-confirmation]', function(e) {
    var check = confirm($(this).data('confirmation'))
    if (!check) {
        e.preventDefault();
    }
    else {
        $.get($(this).attr('href'), function() {
            alert('Success!');
        });
    }
});​

Check FIDDLE

No request was sent when cancel button is clicked

UPDATED FIDDLE