CODEWITHSUNDEEP
javascriptformsbackbone.jsbackbone-events
Dany D
Dany D

Reputation: 1189

Backbone event does not trigger with submit

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.

Upvotes: 2

Views: 486

Answers (2)

Manish Mulimani
Manish Mulimani

Reputation: 17615

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

Upvotes: 1

kapa
kapa

Reputation: 78731

Buttons do not have a submit event, only forms have.

So you should try to catch that submit event on your form element.

Upvotes: 3

Related Questions