Question

我有一个有＆＃34; el＆＃34;设置为表单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
        }
    });

当我使用以下语法进行＆＃34;点击＆＃34;另一个视图中的事件是有效的。

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

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

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

感谢任何帮助。感谢。

Answer 1

提交事件在表单上触发，在您的情况下是＆＃34; el＆＃34;而不是单击的按钮。

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
    }
});

在使用class指定时，提交事件不起作用

1 个答案: