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数据，这应该用于传递给另一个控制器的实例，如果＆＃34; div＆＃34;点击。无论我点击什么div，发送的数据总是来自最后创建的对象。

我错过了一些明显的东西吗？

Answer 1

您可以将事件处理程序绑定到整个文档，并侦听特定类型的所有事件，如果事件目标与某个选择器匹配，则使用回调进行响应。例如：

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

该代码将侦听对文档的任何单击，而如果目标与第二个参数中的选择器匹配，它将在第三个参数中执行回调函数。

当我动态地向DOM添加元素时，我经常发现最好使用这样的方法。

Answer 2

看起来你已经创建了一个全局that，它在每个循环迭代中被that = this覆盖。

尝试使用您创建的实例that.channelContainer，而不是在channelWrapper.channelContainer.append...上调用追加。 channelWrapper的范围是循环迭代。

Jquery多次点击事件

2 个答案: