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

Question

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

所以，首先，视图对象的 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”。

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

Answer 1

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

单击应该这样做：

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

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

Answer 2

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