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