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 事件不会做任何事情。事件绑定到view's el using delegate:

delegateEvents 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/）