功能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/