Events Backbone.js：动态添加未触发的事件

我正在尝试使用Backbone.js，到目前为止还可以相处，但我遇到了一个问题

假设我得到一个根元素和一个子元素

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

标记

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

标记。不幸的是，这行不通

我创作了一把小提琴：

var child=Backbone.View.extend({
模板：u.template（“
项”+count+”
），
活动：{
“单击li”：函数（）{
警报（“listitem单击子元素”）；
}
},
初始化：函数（）{
_.bindAll（“呈现”）；
这个。render（）；
}，render:function（）{
this.$el.html（this.template（））
}
});
var root=Backbone.View.extend({
模板：u.template（'List
'），
活动：{
“单击li”：函数（）{
警报（“listitem单击-根元素”）；
}
},
初始化：函数（）{
_.bindAll（“呈现”）；
这个。render（）；
},
render:function（）{
this.el.html（this.template（））；
$（'body'）.append（this.el）；
var item=new child（）；
this.$el.find（'ul'）.append（item.$el.html（））；
}
});

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

---

我做错了什么吗？

你做错了两件事

首先，您的

子项

是一个

，它不包含
：

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

下一个问题是，实际上并不是将
子元素
插入DOM，而是复制HTML：

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

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

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

演示：（或）
你做错了两件事

首先，您的
子项
是一个
，它不包含
：

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

下一个问题是，实际上并不是将
子元素
插入DOM，而是复制HTML：

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

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

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

演示：（或）
谢谢，物品。$el.html（）确实弄糟了。不知道我为什么这么做，但现在它就像一个咒语：）谢谢你的宝贵提示@因为你的回答解决了我的一个问题，所以mu的投票太短了。谢谢你，谢谢你的邮件。$el.html（）确实把事情搞砸了。不知道我为什么这么做，但现在它就像一个咒语：）谢谢你的宝贵提示@因为你的回答解决了我的一个问题，所以mu的投票太短了。谢谢