Backbone event does not trigger with submit

Question

I have the following Backbone view:

var EditBook = Backbone.View.extend({    
    el: '.page',    
    render: function (id) {    
        var that = this,    
            book = new Book({
                id: id
            });    
        book.fetch({    
            success: function (res) {    
                var template = _.template(editBookTpl, {
                    bookInfo: res
                });    
                that.$el.html(template);
            },    
            error: function () {    
                console.log('Error! Could not retrieve the book.');
            }

        });
    },    
    events: {
        // This event doesn't work...
        'submit .editBookButton': 'editBook'
    },    
    // I cannot seem to be able to bind the submit event to the .editBookButton    
    editBook: function (e) {    
        e.preventDefault();    
        console.log('clicked');
    }
});

What I do is load a template with underscore.js

Inside the template there is a form, with a submit button which has the class .editBookButton

I want to use Backbone's events, but it does not work.

Any ideas as to why?

Is there a way to ensure the event triggers only for elements with this class from this view only?

I have found a similar question, but the answer was not complete.

Answer 1

Instead of using button selector, use form selector.

Assume the html code is :

<form class="editBook">...<button type="submit">Submit</button></form>

Then the code will be:

events: {
    'submit .editBook': 'editBook' 
}