Backbone.js/Handlebars button click event not firing

Question

I have a Handlerbar that has a button, like this:

<button id="addLine" type="image" class="AddButtonClass" title="Add New Line" onclick = "addNewBlock('{{blockId}}');"></button>

I then use this template to create objects dynamically, like this:

    var template = window.app.getTemplate('myHandlebar');       
    var budgetBlock = $(template({blockId: guid}));  
    $("#BudgetTable tbody").append(budgetBlock);

I then have a function like this:

addNewBlock: function(getId){
    alert(getId);
},

The problem is that the button on the Handlebar event never fires. Instead, I get an error "Uncaught ReferenceError: addNewBlock is not defined "

Why cant I assign an onclick event to a button in the handlebars? Is there a way to add an event to a button, dynamically, when the template is created?

thanks

Answer 1

try this instead:

<button id="addLine" type="image" class="AddButtonClass" title="Add New Line" data-id="{{blockId}}"></button>

and in your backbone for example in your initialize function:

$('#addLine').click(function(){
    alert($(this).data('id'));
});

or you can create an event in backbone

events: {
 'click #addLine' : 'addNewBlock'

},
addNewBlock: function(e){
     console.log( $(e.currentTarget).data("id"));
}