Events 如何在主干网中捕获点击事件

我想捕获按钮的（addnewItem）单击事件，但无法实现。以下代码有什么问题

MyView = Backbone.View.extend({
    tagName: "table",
    render: function () {
        var rows = [];
        this.collection.each(function (row) {
            var rowView = new RowView({ model: row});
            rows.push(rowView.render().el);
        });
        this.$el.html(rows);
        $("#app-view").html("<h3>Items</h3><br/>").append(this.el).append("<br /><input type='button' class='btn btn-primary' value='Add new item' id='addNewItem' />");
        return this;
    },
    initialize: function () {
        this.listenTo(this.collection, "add", this.render);
    },
    events: {
        "click #addNewItem": "addNewItem"
    },
    addNewItem: function () {
        alert('Item added');
    }
});

MyView=Backbone.View.extend({
标记名：“表”，
渲染：函数（）{
var行=[]；
this.collection.each（函数（行）{
var rowView=new rowView（{model:row}）；
rows.push（rowView.render（）.el）；
});
这是.$el.html（行）；
$（“#app view”）.html（“Items
”）.append（this.el）.append（
）；
归还这个；
},
初始化：函数（）{
this.listenTo（this.collection，“add”，this.render）；
},
活动：{
单击“添加新项目”：“添加新项目”
},
addNewItem:函数（）{
警报（“添加项目”）；
}
});

只有当事件起源于视图的

el

内部时，视图才会以这种方式捕捉事件。我可以从您的渲染方法中看到按钮位于

el

之外

如果它在html中工作，您可以通过在

el

中包含按钮（我认为这只是一个默认的div）来解决这个问题。您的渲染方法现在可能以以下内容结束：

this.$el.html(rows).append("<br /><input type='button' class='btn btn-primary' value='Add new item' id='addNewItem' />");
$("#app-view").html("<h3>Items</h3><br/>").append(this.el);
return this;

或者，如果

this

关键字在

addNewItem

方法中很重要，请尝试：

$("#app-view").on('click', '#addNewItem', this.addNewItem.bind(this));

---

第一个不起作用，但另一个成功了。非常感谢！但我仍然怀疑；为什么第一种方法（无论是我的方法还是你的解决方案）没有按预期工作。在你最初的代码中，

#addNewItem

在

el

之外这一事实无疑是一个因素。视图不“监听”整个DOM，只监听它包含的内容。这是一个很好的特性—例如，这意味着每个行视图都可以捕获自己的事件，而不会意外地从其他行捕获这些事件。

$("#app-view").on('click', '#addNewItem', this.addNewItem.bind(this));