Question

我无法获得按钮点击事件以在骨干网中注册。我之前列出的事件（输入中的按键）工作正常。

这是我的观点：

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（），但我没做什么似乎让按钮工作。我觉得它必须是一个相对简单的东西，我才会错过！有帮助吗？谢谢！

Answer 1

您的活动可能正在开火，但

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

导致早日回归。 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() {
  //...
}

Answer 2

请尝试使用keyup - 这可能会导致问题。 jquery docs表示它不是官方活动，因此可能会在浏览器等方面提供不同的支持。我总是使用keypress，并且可以肯定地说它可以全面运行。

你是否积极的事件没有被解雇？您是否尝试在方法开始时粘贴警报？有时老派的做法实际上有所帮助！

Backbone.js按钮单击“事件未触发”

2 个答案: