javascript - backbone.js - simple view -

i'm trying run simple view in backbone.js here code:

(function($){      window.templateloaderview = backbone.view.extend({          events: {             'click #add_contact': 'loadtaskpopup'         },          initialize: function () {             alert('templateloaderview - initialize');             _.bindall(this, 'render');         },           render: function() {             alert('templateloaderview - render');         },          loadtaskpopup: function() {             alert('templateloaderview - loadtaskpopup');         }     });  })(jquery); $(document).ready(function() {     window.templateloaderview = new templateloaderview(); });  <div id="add_contact">click here</div> 

when page loads, alerts alert('templateloaderview - initialize');, when click div, nothing happens. please tell wrong?

there couple of things going wrong.

• when create view, creates this.el div isn't rooted in anything
• your event trying hook on div of view, has no inner #add_contact
• you don't alert render because nothing ever calling render.

the simple way click handler work tell view element attach to:

window.templateloaderview = new templateloaderview({el: $("body") }); 

going further...

though, may want div created inside view... go little this:

(function($){      window.templateloaderview = backbone.view.extend({          template: _.template('<div id="add_contact">click here</div>'),          events: {             'click #add_contact': 'loadtaskpopup'         },          render: function() {             $(this.el).html(this.template());             return this;         },          loadtaskpopup: function() {             alert('templateloaderview - loadtaskpopup');         }     });  })(jquery);  $(document).ready(function() {     window.templateloaderview = new templateloaderview();     $("body").append(window.templateloaderview.render().el); });