events - Backbone.js：动态添加不触发的事件

Question

我正在尝试使用 Backbone.js 并且到目前为止相处得很好，但是我遇到了一个问题。

假设我有一个根元素和一个子元素。

当文档加载时，我创建了 3 个“根”实例。根实例附加一个标签。每个根实例创建一个子实例，该子实例创建一个

ul 标签中的标签。

现在我希望子实例将 onclick 事件附加到

标签。不幸的是，它不起作用。

我创建了一个小提琴：

http://jsfiddle.net/Fluxo/sEjE5/17/

var child = Backbone.View.extend({
    template: _.template('<li>Item '+count+'</li>'),
    events: {
        'click li': function() {
         alert('listitem Click Child Element');   
        }
    },
    initialize: function() {
      _.bindAll('render');  
     this.render();   
    }, render: function() {
        this.$el.html(this.template())
    }
});

var root = Backbone.View.extend({
    template: _.template('<div><h3>List</h3><p /><ul></ul><hr />'),
    events: {
        'click li': function() {
         alert('listitem Click - Root Element');   
        }
    },
    initialize: function() {
        _.bindAll('render');
        this.render();
    },
    render: function() {
        this.$el.html(this.template());
        $('body').append(this.el);
        var item = new child();
        this.$el.find('ul').append(item.$el.html());

    }
});

在根元素中创建的事件将触发，但不会触发子元素中的事件。

我做错什么了吗？

Answer 1

你做错了两件事。

首先，你child是一个<li>，它不包含一个<li>：

template: _.template('<li>Item '+count+'</li>'),
events: {
    'click li': ...
},

所以你的click li活动不会做任何事情。事件绑定到视图的elusingdelegate：

委托事件 delegateEvents([events])

使用 jQuery 的delegate函数为视图中的 DOM 事件提供声明性回调。[...] 省略selector导致事件绑定到视图的根元素 ( this.el) 的原因。

因此，如果您想将单击处理程序直接绑定到视图el而不是其子视图之一，则需要省略选择器：

events: {
    'click': ...
}

下一个问题是您实际上并没有将child元素插入到 DOM 中，而是在复制 HTML：

this.$el.find('ul').append(item.$el.html());

通过附加item.$el.html()而不是item.el，您将获取正确的 HTML 作为字符串并插入该 HTML，但您会丢失该过程中的事件；事件绑定到 DOM 对象，item.el而不是 HTML 字符串。您可以通过附加以下内容来解决此问题item.el：

this.$el.find('ul').append(item.el);
// Or you could say, the two approaches are the same
this.$('ul').append(item.el);

演示： http: //jsfiddle.net/ambiguous/K76JM/（或http://jsfiddle.net/ambiguous/kFxHQ/）