Cannot call view function backbone on click a button

Question

I'm trying to call view function in when clicking a button, I found this question and followed but still not reach the view function.

Html:

<form class="addToCart-form">
    <input type="button" id="addToCart" class="addToCart" value="Add To Cart" />
</form>

View :

var CartView = Backbone.View.extend({
   events : {
       "click : #addToCart" : "addToCart"
   },
   addToCart : function (){
        console.log('saved');
        return false;
   },
   render: function(){
      $("#list").html("string");
       $("#rightpanel").html("another string");
   }
});

I tried console.log in my router and render() are working, except in addToCart function.

Any help would be appreciated.

Update your snippet now that you've removed the errant colon. Please include the render function. There's no obvious bug here so we need a complete example to help you find a non-obvious bug. It's my personal "Law of Stackoverflow" that wherever the OP omits code, that's where the bug is. — Peter Lyons, Oct 01 '13 at 04:41
@PeterLyons : Sorry if it was my bad. But in render function here just write some html that's why I didn't put it :) — Nothing, Oct 01 '13 at 04:49
A Backbone view's events are bound to the view's `el` using the delegation form of jQuery's `on`. So, if that `
` is not inside the view's `el` then that event won't work, you need to put the `
` inside the `el` and then get the `el` into the page. — mu is too short, Oct 01 '13 at 05:00

score 0 · Accepted Answer · answered Oct 01 '13 at 05:28

You need to assign el value to this view first for example

 var CartView = Backbone.View.extend({
   el: '.addToCart-form', 
   events : {
       "click : #addToCart" : "addToCart"
   },
   addToCart : function (){
        console.log('saved');
        return false;
   },
   render: function(){
      $("#list").html("string");
       $("#rightpanel").html("another string");
   }
});

After that you can add event handler like you did on the basis of element id (Better approach is to user element class to attach events). Then your will be able to access your form elements like

this.$el.find('#addToCart')

Cannot call view function backbone on click a button

1 Answers1