Jquery Multiple Click Events

Question

Я динамически создаю объекты, которые создают представление и связывают события с построенным представлением при нажатии. Однако событие click всегда привязывается к последнему созданному объекту. Я хочу иметь одно и то же событие click для каждого объекта, но данные, которые я передаю новому классу, уникальны для каждого экземпляра.

Создание объекта:

$.each(data,function(i,json) 
     { 
      var channelWrapper = new ChannelDisplayView(that.channelContainer, json);   
      that.channelContainer.append(channelWrapper.createView()); 
     }); 

ChannelDisplayView.js

function ChannelDisplayView(parent, data){ 
    this.parent = parent; 
    this.data = data; 
} 
ChannelDisplayView.prototype.createView = function(){ 
    this.channelWrapper = $("<div/>").addClass("channelDisplay").attr("id", this.data.fullName); 
    this.channelTitle = $("<div/>").addClass("channelTitle").html(this.data.fullName); 
    this.channelSource = $("<div/>").addClass("sourceType").html(this.data.sourceType); 
    this.channelWrapper.append(this.channelTitle);  
    this.channelWrapper.append(this.channelSource); 

    that = this; 
    this.channelWrapper.unbind().on("click",function(event){ 
     ControllersSingleton.getInstance().getProgramController().setupPage(that.data);  
    }); 

    return this.channelWrapper; 
} 

Как вы можете видеть, каждый класс будет проводить свои собственные данные в формате JSON, и это должно использоваться, чтобы перейти к экземпляру другого контроллера, если нажимается «div». Данные, отправляемые независимо от того, какой div я нажимаю, всегда из последнего созданного объекта.

Я пропустил что-то очевидное здесь?

Answer 1

Вы можете связать обработчик событий со всем документом и прослушать все события определенного типа, ответив обратным вызовом, если цель события соответствует определенному селектору. Например:

$(document).on('click', '.some-class', function(e){ 
    console.log('.some-class element clicked.'); 
}); 

Этот код будет слушать за клики по документу, и , если цель соответствует селектору во втором параметре, он будет выполнять функцию обратного вызова в третьем параметре.

Я часто считаю, что лучше использовать такой метод, когда я динамически добавляю элементы в DOM.

Answer 2

Похоже, вы создали глобальный that, который на каждой итерации цикла переписывается that = this.

Вместо вызова append на that.channelContainer попробуйте использовать экземпляр, который вы создали как channelWrapper.channelContainer.append.... channelWrapper привязан к итерации цикла.