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事件处理程序。

另外：我很确定您不想注册delegateAdded事件处理程序的3次。一个就足够了。

将它从代码开头的循环中移出。