0

我无法让按钮单击事件在主干中注册。我在它之前列出的事件（输入中的按键）工作正常。

这是我的观点：

App.Views.TaskAddForm = Backbone.View.extend({
    tagName: 'div',
    initialize: function(){


    },
    events: {
        'keypress #newTask': 'createNewTask',
        'click #newTaskBtn': 'createNewTask', 
    },
    template: App.Templates.TaskAddForm,
    render: function(){
        this.$el.html(this.template());
        this.$el.attr('id','taskAddForm');
        if (!this.newTask){
            this.newTask = this.$('#newTask');
            this.newPriority = this.$('#newPriority');
        }
        return this;
    },
    createNewTask: function(e){
        if (e.keyCode !== 13) {
            return;
        }
        var task = this.newTask.val();
        var priority = this.newPriority.val();
        if ($.trim(task).length > 0){
           this.collection.add({name: task, priority: priority});
        }
        this.clearForm();
    },
    clearForm: function(){
        this.newTask.val('');
        this.newPriority.val(1);
    }
});

这是我的模板：

<h2>Add Task</h2>
<div class="input-append">
    <select id="newPriority" class="input-medium" style="margin-right: 20px;">
        <option value="1">Now</option>
        <option value="2">Today</option>
        <option value="3">Tomorrow</option>
        <option value="4">Sooner</option>
        <option value="5">Later</option>
    </select>
    <input type="text" id="newTask" placeholder="New Task" class="input-xxlarge">
    <button class="btn" type="button" id="newTaskBtn">Add Task</button>
</div>

您可以看到我实际上并没有将任何内容传递到此模板中，但我仍想使用模板，因为我将根据用户正在处理的内容向页面添加和删除此“添加表单”视图。

输入上的按键有效。点击它旁边的按钮，没有！我什至尝试在我的渲染函数中添加 this.delegateEvents() ，但我似乎没有做任何事情来让按钮工作。我觉得它必须是我只是想念的相对简单的东西！有什么帮助吗？谢谢！

4

2 回答 2

3

您的事件可能正在触发，但是

if (e.keyCode !== 13) {
    return;
}

导致提前返回。event的event对象click没有keyCode，当然不是 13。

只需将事件处理程序分成两个方法，并让它们调用一个通用方法：

events: {
    'keypress #newTask': 'taskNameChanged',
    'click #newTaskBtn': 'addButtonClicked',
},

taskNameChanged: function(e) {
  if(e.keyCode === 13) this.createTask();
},

addButtonClicked: function() {
  this.createTask();
}

createTask: function() {
  //...
}
于 2013-02-01T16:47:30.530 回答
0

尝试keyup改用 - 这可能会导致问题。jquery 文档声明它不是官方事件，因此可能在浏览器等方面有不同的支持。我总是使用并且keypress可以肯定地说它可以全面工作。

你也肯定事件没有被解雇吗？您是否尝试过在方法开始时发出警报？有时，老派的方法实际上可以提供帮助！

于 2013-02-01T17:17:48.557 回答