javascript - 查看事件未在创建的元素上触发？

Question

尝试创建一个待办事项示例应用程序来扰乱主干。我无法弄清楚为什么没有触发任务复选框的单击事件。这是我的 TaskCollection、TaskView 和 TaskListView 代码:

$(document).ready(function() {

Task = Backbone.Model.extend({});

TaskCollection = Backbone.Collection.extend({
    model: 'Task'
});

TaskView = Backbone.View.extend({
    tagName: "li",
    className: "task",
    template: $("#task-template").html(),
    initialize: function(options) {
        if(options.model) {
            this.model = options.model
        }
        this.model.bind('change',this.render,this);
        this.render();
    },
    events: {
            "click .task-complete" : "toggleComplete"
    },
    render: function(){
        model_data = this.model.toJSON();
        return $(_.template(this.template, model_data));
    },
    toggleComplete: function() {
        //not calling this function
        console.log("toggling task completeness");
    }
});

TaskListView = Backbone.View.extend({
    el: $("#task-list"),
    task_views: [],
    initialize: function(options) {
        task_collection.bind('add',this.addTask,this);
    },
    addTask: function(task){
        task_li = new TaskView({'model' : task});
        this.el.append(task_li.render());
        this.task_views.push(task_li);
    },
});
});

任务模板:

<script type='text/template' id='task-template'>
  <li class="task">
        <input type='checkbox' title='mark complete' class='task-check' />
        <span class='task-name'><%= name %></span>
      </li>
</script>

我似乎不明白为什么 toggleComplete 事件不会为任务触发。我该如何解决这个问题？

Answer 1

这里的问题是主干事件仅在您创建新 View 时设置到 View 的元素 (this.el)。但在您的情况下，未使用该元素。所以你的 View 中有 tagName:li 属性，它让 backbone 创建一个新的 li 元素，但你没有使用它。您返回的只是一个从您的模板创建的新列表元素，而不是正在创建的元素 Backbone ，您可以通过 this.el

访问它

因此，您必须使用 jQuery 手动将事件添加到模板创建的元素中，或者将模板作为 innerHtml 添加到元素中:

(this.el.html($(_.template(this.template, model_data)))