простое событие Backbone не срабатывает

У меня есть следующее представление, и я пытаюсь связать событие щелчка с кнопкой с идентификатором #add. Однако он даже не зарегистрирует функцию preventDefault.

var app = app || {};

app.LibraryView = Backbone.View.extend({
el: '#books',

events: {
    'click #add' : 'addBook'
},

initialize: function() {
    this.collection = new app.Library();
    this.render();
    this.listenTo( this.collection, 'add', this.renderBook);

},

render: function() {
    this.collection.each(function( item ) {
        this.renderBook( item );
    }, this );
},

renderBook: function( item ) {
    var bookView = new app.BookView({
        model: item
    });
    this.$el.append( bookView.render().el );
},

addBook: function(e) {
    e.preventDefault();
    var formData = {};
    $('#addBook div').children('input').each(function(index, el) {
      if($(el).val() != '') {
        formData[el.id] = $(el).val();
      }
    });

    this.collection.add(new app.Book(formData));
    console.log("book added");
}


});

Кроме того, я могу вызвать renderBook в консоли, и он добавит новый bookView, однако функция рендеринга, похоже, не работает при первоначальной загрузке страницы.

Вот мой html в нефрите.

block content
#books
  form#addBook(action'#')
    div
      label(for='coverImage').span5 Image URL:
      input#coverImage(type='text')
      label(for='title').span5 Title:
      input#title(type='text').span5
      label(for='author') Author:
      input#author(type='text').span5
      label(for='date') Date:
      input#date(type='text').span5
      label(for='tags') Tags:
      input#tags(type='text').span5
      button#add Add


.bookContainer
  ul
   li Title
   li Author
   li Date
  button Delete