Question

我正在尝试创建一个简单的jQuery插件供我自己使用（是的，我知道已经有一个官方插件用jQuery做这种事情，但我更喜欢我自己的）。我已经基本编码了，我不知道怎么做的唯一问题是检测点击了哪个按钮，并根据该调用通过插件提供的相应功能。最好的办法是什么？

所以这是我目前的代码：

(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);

所以我希望用法是这样的：

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

  })

Answer 1

您需要绑定该扩展程序中的按钮。 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();
});

jQuery插件触发事件/功能取决于单击的按钮

1 个答案: