我遇到了一个问题,即实例化两个对象的循环,而这两个对象反过来创建元素并附加事件处理程序,实际上只附加循环最后一次迭代的事件处理程序。虽然我知道循环中匿名函数内部的作用域存在问题,但我看不出它在这里如何适用,而且我挠头......
因此,首先,视图对象的 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(),这当然是从子元素中删除事件处理程序。