StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PObackbone.js click event not firing
text
Body
copied!<p>Going through a very basic tutorial on backbone.js views.</p> <p>The expected behavior is to call the render function when #sayhello button is clicked. Render simply uses jQuery's html method to put "hello Bud Abbot" in el.</p> <p>But when I click the #sayhello button, nothing happens. No errors or anything. I set a breakpoint in firebug and watch it just skip the render function.</p> <p>Here's the js:</p> <pre><code>App = (function($){ jQueryView = Backbone.View.extend({ initialize: function(){ this.el = $(this.el); } }); HelloWorldView = jQueryView.extend({ el: $('#helloworld'), events:{ 'click #sayhello': 'render' }, initialize: function(params){ jQueryView.prototype.initialize.call(this); this.name = params.name; }, render: function(){ console.log("rendering"); this.el.html("hello " + this.name); } }); var self = {}; self.start = function(){ new HelloWorldView({name: 'Bud Abbot'}); }; return self; }); </code></pre> <p>And here's the html:</p> <pre><code> <div id="helloworld"></div> <button id="sayhello">Say Hello</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> </code></pre> <p></p> <p>What seems strange is when I change this:</p> <pre><code>new HelloWorldView({name: 'Bud Abbot'}); </code></pre> <p>to this:</p> <pre><code>new HelloWorldView({name: 'Bud Abbot'}).render(); </code></pre> <p>the render method is called, but when I try to do it with an event - no dice. Any help to understand what I'm doing wrong is greatly appreciated.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload