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/

函数调用jQuery插件

2 个答案: