Javascript 主干视图上的事件未触发

我已经编写了主干视图-列表视图，希望在其中显示表。对于单个表行，还有另一个视图-EmployeeView

我正在用函数-deleteEmployee（）绑定模板内的delete按钮上的click事件，但看起来事件不起作用，函数未调用

这是代码块-

            app.ListView = Backbone.View.extend({

                tagName : 'table',

                render : function() {

                    $(this.el).append("<tr><td>Employee</td><td>Designation</td><td>Edit</td><td>Delete</td></tr>");
                    app._collection.each(this.renderEmployee, this);
                    $('#main').append(this.$el.html());
                    // main is the main div tag inside body

                },

                renderEmployee : function(model) {

                    var employeeView = new app.EmployeeView({
                        model : model
                    });

                    $(this.el).append(employeeView.render().el);

                },

                initialize : function() {

                    app._collection.on('reset', this.render, this);

                    app._collection.fetch();
                    console.log(JSON.stringify(app._collection));

                }
            });


            app.EmployeeView = Backbone.View.extend({

                tagName : 'tr',

                template : _.template($("#employee-template").html()),

                events : {

                    "click input#editemp" : 'editEmployee',
                    "click input#deleteemp" : 'deleteEmployee'

                },

                render : function() {

                    console.log('inside employeeView');
                    console.log(JSON.stringify(this.model));
                    this.$el.html(this.template(this.model.toJSON()));
                    this.delegateEvents();
                    return this;

                },


                editEmployee : function() {

                },

                deleteEmployee : function() {

                    alert('Hello');

                }

            });

app.ListView=Backbone.View.extend({
标记名：“表”，
render:function（）{
$（this.el）.append（“EmployeeDesignationEditDelete”）；
app.\u collection.each（this.renderEmployee，this）；
$（'#main'）.append（this.$el.html（））；
//main是主体内的主div标记
},
renderEmployee:函数（模型）{
var employeeView=新建app.employeeView({
型号：型号
});
$（this.el）.append（employeeView.render（）.el）；
},
初始化：函数（）{
app.\u collection.on（'reset'，this.render，this））；
app._collection.fetch（）；
log（JSON.stringify（app._collection））；
}
});
app.EmployeeView=Backbone.View.extend({
标记名：“tr”，
模板：35;.template（$（“#员工模板”）.html（）），
活动：{
“单击输入#editemp”：“editEmployee”，
“单击输入#删除EMP”：“删除员工”
},
render:function（）{
console.log（'insideemployeeview'）；
log（JSON.stringify（this.model））；
this.el.html（this.template（this.model.toJSON（））；
这是delegateEvents（）；
归还这个；
},
editEmployee:函数（）{
},
deleteEmployee:function（）{
警惕（“你好”）；
}
});

这是模板-

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

        <td><%= name %></td>
        <td><%= designation %></td>
        <td><input id="editemp" type="button" value="Edit"/></td>
        <td><input id="deleteemp" type="button" value="Delete"/></td>

    </script>

---

使用类来标识可重复的元素，而不是id（因为id标识单个唯一的元素）

事件：{
“click.editemp”：“editEmployee”，
“click.deleteemp”：“deleteEmployee”
}

---

更新了JSFIDLE here

请查看此处的工作情况。由于事件绑定到

tr

元素。能否检查模板是否由

tr

包装？感谢输入Sandeep，但tr元素不在模板代码中，因为它已在EmployeeView中声明为标记名。我怀疑，问题是我将EmployeeView添加到主视图ListView中的方式不要将ID用于页面上出现多次或永远出现的内容

events : {
  "click .editemp" : 'editEmployee',
  "click .deleteemp" : 'deleteEmployee'
}

 <script type="text/template" id="employee-template" >
    <td><%= name %></td>
    <td><%= designation %></td>
    <td><input class="editemp" type="button" value="Edit"/></td>
    <td><input class="deleteemp" type="button" value="Delete"/></td>
 </script>