jQuery自製Plugin-Bind事件函式時檢查有沒有Bind過

因為寫一個豐富Ajax的網站，JavaScript一定會寫很多，有時莫明奇妙的一個HtmlElement Bind二個事件函式以上，可能照成click一次，卻Post二次以上，原因是不同的地方呼叫初始化的函式，所以我就自己寫了一個Plugin去避免這個問題。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

(function ($) {     //jquery object擴展     $.extend($.fn, {         BindCheck: function (id, type, callback) {             ///<summary>檢查有沒有重覆的id，沒有才Bind,如果沒有給id，就判斷有沒有重覆的type</summary>               if (arguments.length == 2) {                 callback = type;                 type = id;                   if (!(this.data("events") && this.data("events")[type])) {                     this.bind(type, callback);                 }             } else {                 var bindCheck = $.data(this,"BindCheck") || $.data(this,"BindCheck", {})                 if (!bindCheck[id]) {                     this.bind(type, callback);                     bindCheck[id] = true;                 }             }         }     }); })(jQuery)

 

範例

HTML:

?

1 2	<input id="test1" type='button' value="test 1"/> <input id="test2" type='button' value="test 2"/>

 

JS:

?

1 2 3 4 5 6 7 8 9 10

$(function(){     $("#test1").BindCheck("click",function(){ alert(1)});        $("#test1").BindCheck("click",function(){ alert(2)});     $("#test1").BindCheck("click",function(){ alert(3)});           $("#test2").BindCheck("test2-1","click",function(){ alert(1)});        $("#test2").BindCheck("test2-1","click",function(){ alert(2)});     $("#test2").BindCheck("test2-2","click",function(){ alert(3)});     $("#test2").BindCheck("test2-2","click",function(){ alert(4)}); })

 

說明

 

2-5是設定test1的click 事件函式，以type做區隔，一個type只會Bind一次，所以按下test1，只會 alert(1)

6-9是設定test2的click 事件函式，以id做區隔，一個id只會Bind一次，所以按下test2， 會alert(1)、alert(3)