Question

I am trying to create a simple jQuery Plugin for myself to use (and yes I know there is already an official plugin with jQuery to do this sort of thing, but i prefer my own). I have got it basically coded up, the only issue that I don’t know how I could do is detect which button is clicked, and based on that call the corresponding function that is provided through the plugin. What would the best way be to do this?

So here’s my code so far:

(function($){
$.fn.extend({

    confirmDialog: function(options) {

        var defaults = {
           titleText: "Confirmation",
           bodyText: "Are you sure you want to delete this?",
           confirmButtonText: "Delete",
           confirmAction: function(){},
           cancelAction: function(){},
        };

        var options = $.extend(defaults, options);

        return this.each(function() {

    $('<div class="confirmation-box-wrapper"><div class="confirmation-box"><div class="confirmation-title">'+options.titleText+'</div><div class="confirmation-message">'+options.bodyText+'</div><div class="options"><a class="buttons cancel">Cancel</a><a class="buttons confirmation">'+options.confirmButtonText+'</a></div></div></div>').appendTo('body');  



        });
    }
});
})(jQuery);

So what I would expect the usage to be like is this:

 $(".elementToDelete").confirmDialog({
      confirmAction: function(){ alert("Deleted"); },
      cancelAction: function(){ alert("Cancelled"); }

  })

Answer 1

You need to bind the buttons in that extension. http://jsfiddle.net/4mjBb/

var wrapper=$('<div class="confirmation-box-wrapper"... ...')appendTo('body'); 

wrapper.find('.confirmation').on('click', function(){
    if (typeof options.confirmAction=='function') options.confirmAction();

});
wrapper.find('.cancel').on('click', function(){
    if (typeof options.cancelAction=='function') options.cancelAction();
});