Использование jQuery делегата вызывает события для каждого элемента (2 4 8 16 32)

Question

Итак, я написал код ниже:

   jQuery('#contentWrapper').delegate(".addButton", "click", function(){
      addRow(jQuery(this));
   });

function addRow(thisButton){

        var parent = thisButton.parent();  
        console.log("parent = ",parent);

        var childrenNoEvents = thisButton.parent().children().clone(false); 
        console.log("childrenClone = ",childrenNoEvents);

        var cloneWithoutEvents = thisButton.parent().clone(false);
        console.log("parentClone = ",cloneWithoutEvents);

        thisButton.parent().append(childrenNoEvents);
    };

, который работает с таким DOM-элементом, как этот

<div class="whatever">
    <span>first element</span><span class="addButton">O</span><span class="deleteButton">X</span>
</div>

Когда я щелкаю O (элемент DOM с классом addButton) в первый раз, он работает должным образом, но в следующий раз он создает / клонирует вдвое больше элементов, чем предыдущий щелчок. Я предполагаю, что это связано с обработчиком делегата, вызывающим addRow для стольких классов ".addButton", которые есть в DOM, но я не знаю, как это исправить.

Бонусный вопрос:

Как бы я использовал замыкание для создания постоянной переменной, которую я могу увеличивать внутри функции addRow при каждом запуске события? (или есть лучший способ сделать это?)

Answer 1

Каждый раз, когда вы выполняете функцию, вы копируете содержимое .whither обратно в .whither, фактически удваивая их. Попробуйте использовать этот подход:

$('#contentWrapper').on("click", ".addButton", function() { // note that I use the .on() function, as .delegate() is just a wrapper since jQuery 1.7
    addRow($(this));
});

function addRow(thisButton){
    thisButton.closest('ul').append(thisButton.parent().clone(false));
};

С таким синтаксисом HTML:

<div id="contentWrapper">
    <ul class="whatever">
        <li>
            <span>first element</span>
            <span class="addButton">O</span>
            <span class="deleteButton">X</span>
        </li>
    </ul>
</div>

Вы можете проверить это с помощью этого JSFiddle: http://jsfiddle.net/ZsCCs/

Подробнее о методе .on (): http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html