jQuery/JavaScript:仅在循环的最后一次迭代期间分配的事件处理程序

jQuery/JavaScript: Event handlers only assigned during the last iteration of a loop

本文关键字：迭代 分配 程序 事件处理 最后一次 jQuery JavaScript 循环      更新时间：2023-09-26

我遇到了一个问题，即实例化两个对象的循环，而这两个对象反过来创建元素并附加事件处理程序，实际上只附加循环最后一次迭代的事件处理程序。虽然我知道循环中匿名函数内部的作用域存在问题，但我看不出它在这里如何适用，而且我挠头......

因此，首先，视图对象的 setContent 方法遍历内容数组，并创建 CrowdControl.ui.Button 对象的两个实例：（为清楚起见，删除了不相关的代码）

setContent: function(content){
    if(content.length > 0){
        for(var i in content){
            var c = content[i];
            var container = $('<div></div>');
            //content array code removed for clarity
            var reject = new CrowdControl.ui.Button({label:'Reject'});
            var approve = new CrowdControl.ui.Button({label:'Approve'});
            container.append(reject.draw());
            container.append(approve.draw());
            this.contentlist.addItem(container);

        }
    }
}

这是 Button 对象（为了清楚起见，再次删除了一些代码）

CrowdControl.ui.Button = function(){
    this.uniqueId = Math.random(); //added for debugging
    var els = this.elements = {}
    els.container = $('<div class="cc-button"></div>');
    els.label = $('<div></div>').text('Debug'); 
    els.container.append(els.label);
}
CrowdControl.ui.Button.prototype.draw = function(){
        console.log('Drawing element '+this.uniqueId);
        var els = this.elements;
        els.container.remove();
        console.log('Binding click to button');
        console.log(els.container); 
        //attach the click handler - this will only attach during the last iteration
        els.container.click( function(){ console.log('wtf'); });
        return els.container;
}

上面的代码记录了所有元素都是创建的，它们都是唯一的，但只有 Button 对象的最后两个实例接收事件处理程序并在单击时记录"wtf"。

任何帮助将不胜感激 - 如果您需要更多代码或解释，请询问...

我修复了你的代码：http://jsfiddle.net/maniator/E8XcQ/6/

单击应如下所示：

//attach the click handler 
$(els.container).click(function() {
    console.log('wtf');
});

您不小心将click附加到 DOM 元素而不是 jQuery 元素

谢谢尼尔的帮助。 实际上，问题出在我的框架中的其他地方，每次迭代后视图都会错误地重绘，并且每次都调用 .remove（），这当然是从子元素中删除事件处理程序。

相关文章：