使用类指定时提交事件不起作用

Question

我有一个将“el”设置为表单 ID 的视图。我在表单中有两个按钮，一个用于提交，一个用于清除。我不知道如何为每个按钮设置一个事件。例如，当我将事件设置如下时，它们将不起作用：

表单模板：

    <form id="addTask" action="">
        <input type="text" placeholder="Your new task"/>
        <input type="submit" id="submit" value="Add Task"/>
        <input type="submit" id="clear" value="Clear" />
    </form>

表单视图：

    App.Views.AddTask = Backbone.View.extend({
        el: '#addTask',

        events: {
            'submit .edit': 'submit',
            'submit .clear': 'clear'
        },

        submit: function(e) {
            e.preventDefault();
            var newTaskTitle = $(e.currentTarget).find('input[type=text]').val();
            var task = new App.Models.Task({ title: newTaskTitle });

            this.collection.add(task);
        },

        clear: function() {
            // do some stuff
        }
    });

当我在另一个视图中对“单击”事件使用以下语法时，它可以工作。

    events: {
        'click .delete': 'destroy',
        'click .edit': 'edit'
    },

我已用 Google 搜索，但找不到答案。有趣的是，我找到了一个教程，其中这种语法与提交事件一起使用：

http://dailyjs.com/2013/01/31/backbone-tutorial-10/

感谢您提供任何帮助。谢谢。

Answer 1

提交事件是在表单本身上触发的，在您的情况下是您的“el”，而不是单击的按钮。

events: {
    'submit': 'onSubmit'
}

可以，但您无法知道点击了哪个按钮。 如果你必须提交按钮，我想正确的方法是有两个表单。

如果有帮助，请告诉我！

编辑：

如果您不想更改表单：

表单模板：

<form id="addTask" action="">
    <input type="text" placeholder="Your new task"/>
    <input type="submit" id="submit" value="Add Task"/>
    <input type="submit" id="clear" value="Clear" />
</form>

表单视图：

App.Views.AddTask = Backbone.View.extend({
    el: '#addTask',

    events: {
        'submit': 'submit',
        'click #clear': 'clear'
    },

    submit: function(e) {
        e.preventDefault();
        var newTaskTitle = $(e.currentTarget).find('input[type=text]').val();
        var task = new App.Models.Task({ title: newTaskTitle });

        this.collection.add(task);
    },

    clear: function() {
        // do some stuff
    }
});