jQuery插件中的函数调用

Question

我几乎有这段代码来定义插件实例：

$.fn.someplugin = function(opts) {
  $(document).on('click', '.option-1', function() {
    alert(1);
  });
};

我使用这样的代码来使我的插件工作：

$('.selector-1').someplugin();

因此，jQuery以这种方式将可能的单击事件侦听器绑定到文档。

问题是，当我多次使用插件时，是否意味着jQuery将10个单击事件绑定到文档？

$('.selector-1').someplugin();
$('.selector-2').someplugin();
$('.selector-3').someplugin();
$('.selector-4').someplugin();
$('.selector-5').someplugin();
$('.selector-6').someplugin();
$('.selector-7').someplugin();
$('.selector-8').someplugin();
$('.selector-9').someplugin();
$('.selector-10').someplugin();

通过这种方式，它绑定了10个单击监听器--因为fn.someplugin被调用了10次，还是只调用了一次？

Answer 1

是的，它将10个单击侦听器绑定到$(document)对象。

每次调用someplugin()时，它都会绑定一个新的侦听器。

JSFIDDLE

如果要向文档(插件内部)添加一个单击处理程序，可以这样做：

(function ($) {
    $.fn.someplugin = function(opts) {
       alert("Another someplugin call.");
    };

    $(document).on('click', '.option-1', function() {
       alert(1);
    });
})($);

JSFIDDLE

Answer 2

您可以这样做，只绑定一次：

(function ($) {
    $.fn.someplugin = function (opts) {
        return $(this).each(function (index, value) {
            $(document)
            .off('click', '.option-1')
            .on('click', '.option-1', function (event) {
                event.preventDefault();
                alert(1);
            });
        });
    };
})(jQuery);

$(document).ready(function () {
    $('.selector-1, .selector-2').someplugin();
});

$(this).each允许您绑定多个选择器。

如果事件存在，.off()将解除它的绑定。

jsfiddle : http://jsfiddle.net/rWYS4/