for循环内的jQuery自定义事件仅在最后一次迭代时触发

Question

我有一个for循环，该循环遍历JSON中找到的对象以填充表单字段。

找到它的每个对象时，它将.trigger('click')按钮添加必需的字段，以确保有正确的数量供用户填写。

触发的按钮具有.click()函数，该函数将在JSON中找到的每个对象的一部分附加到表单中，并且该函数的末尾会触发自定义事件，并传入JSON对象的索引.trigger('delegateAdded', delegateIndex) 。

最后，我的事件处理程序应使用我们之前传递的索引值， console.log注销添加的每个部分。

预期结果（在此示例中，JSON中包含3个对象）：

1. for循环迭代3个对象，单击按钮3次。
2. 3个表单部分将附加到该表单。
3. 'delegateAdded'自定义事件被触发3次 ，控制台记录索引： 0、1和2

观察到的结果（在此示例中，JSON中包含3个对象）：

1. for循环迭代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事件处理程序。 一个就足够了。

在代码的开头将其移出循环。