Get event after function complete

Question

I have a form where people can delete records;

<a href="/delete/1" class="confirm-action">Delete Record 1</a>
<a href="/delete/2" class="confirm-action">Delete Record 2</a>
<a href="/delete/3" class="confirm-action">Delete Record 3</a>

To ensure they are sure, I am using a "Are you sure" confirmation script (Popconfirm) which gives a nice little popup confirmation.

$(".confirm-action").popConfirm();

If the user clicks cancel, nothing happens. If they click 'yes' - the link is processed and the record deleted. This is working as intended.

Now instead of following the link (when the user clicks 'yes'), I want to fire an ajax request:

$('.confirm-action').click(function(event) {
     event.preventDefault();
     $.ajax({
            // Ajax stuff here
      });
});
$(".confirm-action").popConfirm();

The problem is when I try this, the functions are fired in the correct order when expected, except the event is null, so the script fails.

How do I "preventDefault()" when the event is null, and/or manually get the event to prevent the link from being followed by the browser?

Edit: JSFiddle showing the problem.

Answer 1

As noted in the comments, the plugin is horrible and plays with _data(events) IE plays with internal event management of jQuery.

If you aren't concerned about the UI, I would suggest you to go with normal confirm() as used in SO.

I've created this for you while typing this answer:

$.fn.nativeConfirm = function (options) {
    return this.click(function () {
        var bool = confirm(options.text);
        bool ? options.yes.call(this) : options.no.call(this);
    });
}

Example:

$('a').nativeConfirm({
    yes: function(){
      alert('yes');
    },
    no:function(){
      alert('no');
    },
    text: 'Seriously?'
});