如何将点击事件附加到我的 jQuery 插件中的元素？

Question

我正在制作一个插件，需要让最终用户能够控制从插件内部调用的点击事件。

我将如何实现这一目标？到目前为止，我已经完成了这一点：

(function($) {
    $.fn.multiForm = function(options) {
        var settings = $.extend({
            titles : [],
            nextButton: 'nl-next',
            prevButton: 'nl-prev',
            onNext: function(){}
        }, options);

        //#1 I first need to attach a click event on settings.nextButton element
        //#2 So when that button is clicked, I want the user to use oNext() and return true or false which I will then capture inside this plugin

        this.each( function(options) {  
            // some plugin code 
        });
    }
}(jQuery));

这是用户使用插件的方式：

$('#someID').multiForm({
   onNext:function(){
     // return either true or false
     // I need to capture this return value
   }
});

Answer 1

在您的插件中，您可以调用 settings.onNext 并使用它的 return 值。

if(typeof settings.onNext === 'function') {
   var result = settings.onNext();
   if(result) { ... }
}

您将点击事件附加到 nextButton，就像您对任何其他按钮所做的那样：

$(setting.nextButton).click(function() { 
   ...
});

请注意 nl-next 不是有效的 jQuery 选择器。是 class 名字吗？如果是这样，请确保将 . 添加到选择器。

另请注意，您可能需要传递一些上下文，以确保您不会将侦听器添加到此 class 的所有按钮，以防页面上有多个插件实例.

$('.' + setting.nextButton, someDivWrappingMyPlugin).click(function() {
   ...
});

如何将点击事件附加到我的 jQuery 插件中的元素？

How to attach click event to an element inside my jQuery plugin?

jquery

jquery-plugins