Jquery Backbone.js：为什么事件不在列表视图中触发？

我有这个主干代码，我不明白为什么在我看来这些事件不起作用。我的应用程序应该是一个可编辑的图库。因此，我在html元素$（

#obrazekDetail

）中创建了一个视图（画廊视图），并使用

ObrazekViews

获取它。我想在

ObrazekView

上触发事件，但无法使其工作。抱歉再次提出同样的问题。但我找不到任何合适的解决办法。主干JavaScript和HTML代码如下所示：

<table id="obrazekDetail" cellspacing="0" cellpadding="2">
</table>
  <!-- Templates -->
<script type="text/html" id="template-obrazek">
    <tr id="<%= order %>">
        <td><img src="<%= obrazek %>"/>
        </td>
        <td>Nadpis:<input name="nadpis" value="<%= nadpis %>" /></td>
        <td>Popis:<input name="popis" value="<%= nadpis %>" /></td>
        <td><input class="edit" type="submit" name="action" value="Edit" /></td>
        <td><input  class="delete" type="submit" name="action" value="Delete" /></a></td>
    </tr>
</script>

<script type="text/template" id="galerie-template">

</script>

// js code

$(function(){

    window.app = window.app || {};
    window.app.obrazek = new Obrazek();
    window.app.obrazky = new Obrazky();
    window.app.view = new GalerieView();
});


var Obrazek = Backbone.Model.extend({
url : function() {
  return  "/ajax-obrazek/" + this.id + "/";
}
});

var Obrazky = Backbone.Collection.extend({
    model: Obrazek,
    initialFetch: function() {
        var self = this;
        $.each(obrazky_data, function(i, object) {
            var obrazek = new Obrazek();
            obrazek.set({
                id: object.pk,
                nadpis: object.fields.nadpis,
                popis: object.fields.popis,
                order: object.fields.order,
                obrazek: object.fields.obrazek
                 });
            self.model = obrazek;
            self.add(self.model);
        });
    }
});
var ObrazekView = Backbone.View.extend({
    template: _.template($("#template-obrazek").html()),
    events: {
        "click input.edit"   : "edit",
        "click input.delete" : "clear"
    },
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
        console.log(this);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    clear: function() {
        console.log('test');
      this.model.destroy();
    },
    edit: function() {
            console.log('test');

    }

});
var GalerieView = Backbone.View.extend({
    el: $("#obrazekDetail"),

    initialize: function() {
        window.app.obrazky.bind('add', this.addOne, this);
        window.app.obrazky.bind('reset', this.addAll, this);
        window.app.obrazky.bind('all', this.render, this);
        window.app.obrazky.initialFetch();
    },
    render: function() {
        return this;
    },
    addOne: function(obrazek) {
        var view = new ObrazekView({model: obrazek});
        this.$el.append(view.render().el.innerHTML);
    },
    addAll: function() {
          window.app.obrazky.each(this.addOne);
    }
});

"/>
Nadpis：
Popis：
//js代码
$（函数（）{
window.app=window.app | |{}；
window.app.obrazek=新的obrazek（）；
window.app.obrazky=新的obrazky（）；
window.app.view=新建GalerieView（）；
});
var Obrazek=Backbone.Model.extend({
url:function（）{
返回“/ajax obrazek/”+this.id+”/”；
}
});
var Obrazky=Backbone.Collection.extend({
型号：Obrazek，
initialFetch:function（）{
var self=这个；
$.each（obrazky_数据，函数（i，对象）{
var obrazek=新obrazek（）；
奥布拉泽克({
id:object.pk，
nadpis:object.fields.nadpis，
popis:object.fields.popis，
顺序：object.fields.order，
obrazek:object.fields.obrazek
});
self.model=obrazek；
self.add（self.model）；
});
}
});
var ObrazekView=Backbone.View.extend({
模板：35;.template（$（“#template obrazek”）.html（）），
活动：{
“单击输入。编辑”：“编辑”，
单击“输入。删除”：“清除”
},
初始化：函数（）{
this.model.bind（'change'，this.render，this）；
this.model.bind（'destroy'，this.remove，this）；
console.log（this）；
},
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
清除：函数（）{
console.log（'test'）；
this.model.destroy（）；
},
编辑：函数（）{
console.log（'test'）；
}
});
var GalerieView=Backbone.View.extend({
el:$（“obrazekDetail”），
初始化：函数（）{
window.app.obrazky.bind（'add'，this.addOne，this）；
window.app.obrazky.bind（'reset'，this.addAll，this'）；
window.app.obrazky.bind（'all'，this.render，this）；
window.app.obrazky.initialFetch（）；
},
render:function（）{
归还这个；
},
addOne：函数（obrazek）{
var view=newobrazekview（{model:obrazek}）；
这是.el.append（view.render（）.el.innerHTML）；
},
addAll:function（）{
window.app.obrazky.each（this.addOne）；
}
});

当您执行此操作时，

this.$el.append（view.render（）.el.innerHTML）；

您正在提取普通html并剥离附加到它们的所有事件。 当您使用

事件：{
“单击输入。编辑”：“编辑”
}，

您可能认为事件直接附加到

输入。编辑
但它不是。主干将事件附加到el并将其委托给与选择器匹配的子元素。因此，在运行时，如果附加另一个
输入。编辑
元素，则事件仍会对其起作用

因此，只需使用这种常规方法，
this.$el.append（view.render（）.el）；
它维护所有事件，并且不会给出令人惊讶的结果！
当您执行此操作时，
this.$el.append（view.render（）.el.innerHTML）；
您正在提取普通html并剥离所有附加到它们的事件。
当您使用

事件：{
“单击输入。编辑”：“编辑”
}，

您可能认为事件直接附加到
输入。编辑
但它不是。主干将事件附加到el并将其委托给与选择器匹配的子元素。因此，在运行时，如果附加另一个
输入。编辑
元素，则事件仍会对其起作用

因此，只需使用这种常规方法
this.$el.append（view.render（）.el）；
它维护所有事件，不会给出令人惊讶的结果！
尝试将
input type='submit'
更改为
input type='button'
，看看它是否工作感谢您的回答。不幸的是，它没有帮助。尝试将
input type='submit'
更改为
input type='button'
，看看它是否工作感谢您的回答。取消幸运的是，这没有帮助。