Question

If I have an a tag:

<a id="delete-event" href="/delete/1234">Delete</a>

And some javascript which prompts to confirm the delete:

 $("#delete-event").click(function(e) {
    e.preventDefault();

    bootbox.confirm("Are you sure you wish to delete this?", function(confirmed) {
        if(confirmed) {
            return true;
        }
    }); 
});

I thought doing e.preventDefault() would prevent the a href from firing, but its not. When I click the a tag it simply goes to the url, without executing the javascript. How can I make this work?

Thanks.

Answer 1

This code works:

You can’t just do return true and expect the link to fire after you’ve done e.preventDefault(). I had to replace your bootbox.confirm() with a JS confirm but it should still work.

$("#delete-event").click(function(e) {
    e.preventDefault();
    var a = confirm("yes?");
    if(a) window.location = $('#delete-event').attr('href');
});​

DEMO

Try replacing your code block with the one I provided above. If that works, put your bootbox confirmation back in and try again. That’ll tell you where the error is.