CODEWITHSUNDEEP
backbone.jsbackbone-events
BeniRose
BeniRose

Reputation: 412

Backbone.js Button Click Event Not Firing

I'm having trouble getting a button click event to register in backbone. The event I have listed right before it (keypress in an input) is working fine.

Here is my View:

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

Here is my template:

<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>

You can see I'm not actually passing anything into this template, but I wanted to still use a template because I will be adding and removing this Add Form view to the page depending on what the user is working on.

The keypress on the input works. The click on the button right next to it, does not! I've even tried adding this.delegateEvents() in my render function, but nothing I do seems to get the button working. I feel like it has to be something relatively simple that I'm just missing! Any help? Thanks!

Upvotes: 0

Views: 3000

Answers (2)

jcvandan
jcvandan

Reputation: 14314

Try using the keyup instead - this may be causing an issue. The jquery docs state that it isn't an official event so may have different support across browsers etc. I always use keypress and can say for sure that works across the board.

Also are you positive the event isn't being fired? Have you tried sticking an alert at the start of the method? Sometimes the old-school approach can actually help!

Upvotes: 0

jevakallio
jevakallio

Reputation: 35890

Your event is probably firing, but

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

Is causing an early return. The event object for click event has no keyCode, and it certainly isn't 13.

Just separate the event handlers into two methods, and have them call a common method:

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

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

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

createTask: function() {
  //...
}

Upvotes: 3

Related Questions