爲什麼我的jQuery擴展的功能「靜態」？

Question

我做了一個自定義的jQuery擴展來處理上傳文件。

我的剝離版本：http://jsfiddle.net/6huV6/

我的完整版：http://jsfiddle.net/LQrJm/

我的問題是buildBondye被稱爲2倍，但我的延長加2×2滴管和按鈕..

如何我解決這個問題嗎？

Answer 1

您得到4個，因爲對於匹配元素集合中的每個元素，您將調用buildBondye函數，該函數又調用addButton和addDropper函數。這些函數使用$this，它是整個匹配元素集（所以它們都是），不僅是.each()的迭代元素。

你可以通過一個參考的單個元素，以這兩個功能，並使用替代解決這個問題：

var buildBondye = function() { 
    // inside buildBondye this refers to the specific element for the iteration of .each() 
    // different to the this inside the $.fn.bondye function 
    addButton(this); 
    addDropper(this); 
} 

var addDropper = function (element) { 
    $dropper = $('<input type="text" readonly />'); 
    $dropper.val('drop here'); 
    $(element).after($dropper); 
} 

var addButton = function (element) { 
    $button = $('<input type="button" />'); 
    $button.val('browse'); 
    $button.bind('click', function() { 
     $(element).trigger('click'); 
    }); 
    $(element).after($button); 
} 

在this updated jsFiddle看看。