jQuery回調累積

我正在構建一個名爲magicForm的簡單jQuery插件（這有多可笑）。現在面對一個我認爲我沒有正確理解的問題。jQuery回調累積

我的插件應該應用在容器元素上，當用戶填充它們時，它將逐個顯示其每個輸入。這不是我的問題的確切目的。每次我初始化容器時，我都會聲明一個事件點擊回調。讓我舉一個例子。

(function($){ 
    var methods = { 
    init: function(options){ 
     return this.each(function(){ 
     var form, inputs; 

     var settings = { 
      debug: false 
     }; 
     settings = $.extend(settings, options); 
     form = $(this); 

     $('a.submit', form).on('click', function(event){ 
      if (settings.submitCallback) { 
      settings.submitCallback.call(form, inputs); 
      } 
      return false; 
     }); 
     }); 
    }, 
    reset: function() { 

    } 
    } 

    $.fn.magicForm = function(method) { 
    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist.'); 
    } 
    }; 
})($);

我專注於這個代碼的特定部分：

$('a.submit', form).on('click', function(event){ 
    if (settings.submitCallback) { 
     settings.submitCallback.call(form, inputs); 
    } 
    return false; 
});

因爲每個init方法被調用的時候，那個可憐的回調註冊。

我痛苦地經歷了這一點，當我調用嵌套在Twitter的引導「選項卡」的元素在我的插件，嵌套本身在引導模式：我每次打電話init我的引導模式的「顯示」事件被觸發。

所以，這是我固定在我的init方法：

// Prevent callback cumulation 
if (!$(this).data('form_initialized')) { 
    $('a.submit', form).on('click', function(event){ 
     if (settings.submitCallback) { 
      settings.submitCallback.call(form, inputs); 
     } 
     return false; 
    }); 
    $(this).data('form_initialized', true); 
}

而且我感覺到知道這很遠。

謝謝你的時間！

來源

2013-01-10 Codii

什麼是「累積」？我假設你的意思是「累積」？ –

是的，我很抱歉，我修好了 – Codii

不要道歉，我是一個聰明的屁股。我應該向你道歉！ –

很多jQuery插件使用data知道日eir插件已初始化。大多數情況下，他們使用自己的插件的名稱作爲數據的一部分（或全部）。例如：

$(this).data('magicForm')

所以你使用到的信號的方法是不壞的一個。

但是，你還有其他兩個選項：

1）拉事件處理程序進行這樣的處理程序是一個實例。在你的方法上面，做var fnOnSubmit = function() { ... }然後你可以簡單地通過調用$('a.submit', form).unbind('click', fnOnSubmit)確保正確的綁定，然後按照你已經做的方式重新綁定它。

2）另一種選擇是使用事件命名空間。

$('a.submit', form).unbind('click.magicForm');然後用.on('click.magicForm')重新綁定它這個命名空間的方法確保當您解除綁定只在您的命名空間magicForm的情況下解除綁定，從而使所有其他點擊事件（例如，來自其他插件）不變。

我希望這會有所幫助。

來源

2013-01-10 14:52:21

這很簡單明瞭，謝謝。 – Codii

你可以先明確地刪除點擊處理程序：

$('a.submit', form).off('click').on('click', function(event){ ... })

不過，我會建議你使用事件命名空間，以防止所有點擊處理器（甚至是那些可能通過代碼設置不是你自己的）被刪除：

$('a.submit', form).off('click.magicForm').on('click.magicForm', function(event){ ... })

來源

2013-01-10 14:51:48 robertklep

我想避免取消綁定的方式，但命名空間的方式似乎是正確的。 – Codii

jQuery回調累積

回答

相關問題