Почему моя функция расширения jQuery действует как «статическая»?

Question

Я создал пользовательское расширение jQuery для обработки файлов для загрузки.

Моя раздели версия: http://jsfiddle.net/6huV6/

Моя полная версия: http://jsfiddle.net/LQrJm/

Моя проблема заключается в том, что buildBondye называется 2 раза, но мое расширение добавляется 2 х 2 капельницы и кнопки ..

Как я исправить это?

Answer 1

Вы получаете четыре, потому что для каждого элемента в вашем наборе согласованных элементов вы вызываете функцию 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.