Wait for user confirmation before triggering event

Question

I'm trying to figure out how events works and how to wait for a second event to trigger before the original event is being executed.

 $.fn.customConfirm = function (message){
     // Create modal
     // then ...
     $(confirmModal).find("modal-footer a").click(function(e2){
          e2.preventDefault();
          return ($(this).hasClass("dialogConfirm")); // Returns true if option has class dialogConfirm
     });
 };

 $("a[data-confirm]", click(function(e){
      if (!$.customConfirm($(this).attr("data-confirm")))
          return false; // Only if customConfirm returns false
      // Continue
 });

This works like a charm. customConfirm creates a bootstrap modal with 2 buttons (confirm/cancel) and sets the data-confirm attribute value as the modal-body html.

What I don't know how to solve is how to handle the event e based on the user interaction with the modal. As of now it just shows the modal dialog and the original event seems to do nothing.

Answer 1

I solved it by adding the attribute data-confirmed to the clicked element if the user confirms and then triggering a second click() on the original element.

$.fn.customConfirm = function (message){
      var handle = $(this);
      // Create modal
      // then ...
      $(confirmModal).find("modal-footer a").click(function(e2){
           e2.preventDefault();
           $(handle).attr("data-confirmed", ($(this).hasClass("dialogConfirm")))[0].click();
           return false;
      });
 };

$("a[data-confirm]").click(function(e){
     if ($(this).attr("data-confirmed") !== "true")
     {
           e.preventDefault();
           $(this).customConfirm();
           return false;
     }
     $(this).removeAttr("data-confirmed");

     // Continue
});