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/