主干.js:动态添加未触发的事件

Question

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

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

加载文档时，我创建了 3 个"根"实例。根实例追加标签。每个根实例创建一个子实例，该子实例在 ul 标记中创建标记

。 现在，我希望子实例

将子实例附加到标签并点击事件

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

我创建了一个小提琴：

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事件不会执行任何操作。事件使用以下delegate绑定到视图的el：

代表事件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/）