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 (), что, конечно, удаляло обработчики событий из дочерних элементов.