Пользовательское событие jQuery внутри цикла for, запускаемое только на последней итерации

Question

У меня есть цикл for, который перебирает объекты, найденные в JSON, для заполнения полей формы.

С каждым найденным объектом будет .trigger('click') кнопка, которая добавляет обязательные поля, гарантируя, что пользователь должен заполнить правильную сумму.

Триггерная кнопка имеет функцию .click(), которая добавляет раздел в форму для каждого объекта, найденного в JSON, и конец этой функции вызывает пользовательское событие, передавая индекс объекта JSON .trigger('delegateAdded', delegateIndex).

Наконец, мой обработчик событий должен console.log из каждого добавленного раздела использовать индексное значение, которое мы пропустили ранее.

Ожидаемый результат (с 3 объектами в JSON в этом примере):

1. цикл повторяет более 3 объектов, нажимает кнопку 3 раза.
2. 3 раздела формы добавляются к форме.
3. 'delegateAdded' пользовательское событие запускается 3 раза , консоль регистрирует индексы: 0, 1 & 2

Наблюдаемый результат (с 3 объектами в JSON в этом примере):

1. цикл повторяет более 3 объектов, нажимает кнопку 3 раза.
2. 3 формы формы добавляются к форме.
3. 'delegateAdded' пользовательское событие запускается 1 раз , консоль записывает финал 3-х индексов: 2

Вот мой код для справки:

var addDelegate = $('#add-delegate');
var delegateContainer = $('#additional-delegates');
var delegateHTML = $('#delegate-container');
var delegateNumber = 1;
var delegateIndex = -1;
var delegateData = $.parseJSON($('#delegateData').html());
var numberOfDeligates = delegateData.length;

// CLICK FUNCTION ON BUTTON
addDelegate.click(function (e) {
    e.preventDefault();

    delegateNumber++;
    delegateIndex++;

    var delegateClone = delegateHTML.html();
    var delegateNewHTML = delegateClone.replace(/_delegateNumber_/g, delegateNumber).replace(/_delegateIndex_/g, delegateIndex);

    delegateContainer.append(delegateNewHTML);

    // TRIGGER CUSTOM EVENT
    $(document).trigger('delegateAdded', delegateIndex);

});

// ITERATE OVER NUMBER OF JSON OBJECTS
for (var i = 0, iDelegateNum = 2; i < numberOfDeligates;) {

    // TRIGGER BUTTON CLICK FOR EACH ITERATION
    addDelegate.trigger('click');

    // HANDLE CUSTOM EVENT FOR EACH ITERATION
    $(document).on('delegateAdded', function (event, dIndex) {
        console.log(dIndex);
    });
}

Поскольку только последний индекс выходит из системы, это похоже на то, что событие перезаписывается новым, но я не думаю, что это вещь, или это так?

Answer 1

При первом вызове addDelegate.trigger('click'); обработчик событий delegateAdded еще не зарегистрирован.

Кроме того: я почти уверен, что вы не хотите регистрировать 3 раза обработчик событий delegateAdded. Одного достаточно.

Вытащите его из цикла в начале вашего кода.