Databases
StackOverflow2013
Postsdbo
POClick event not firing in main view in Backbonejs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClick event not firing in main view in Backbonejs
    text
    copied!<p>I have really weird problem. I am trying to implement "root" view which also works as some namespace structure. Same principle introduced in codeschool.com course part II. In this root view, I want to catch event "click button", but that's the problem. When I click on button nothing happened.</p> <pre><code>window.App = new (Backbone.View.extend({ el: $("#app"), Collections: {}, Models: {}, Views: {}, Routers: {}, events: { 'click button' : function(e) { alert("Thank god!"); } }, render: function(){ //for test purposes console.log($("#app").find("button")); console.log(this.$el.find('button')); }, start: function(){ this.render(); new App.Routers.PostsRouter(); Backbone.history.start({pushState: true}); } }))(); $(document).ready(function() { App.start() }); </code></pre> <p>The HTML look like this</p> <pre><code>&lt;body&gt; &lt;div id="app"&gt; &lt;div id="posts"&gt;&lt;/div&gt; &lt;button&gt;Click me&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And what's really weird is output from console.log in render function. Both selectors are same, even the context is same, so where is problem?</p> <pre><code>console.log($("#app").find("button")); //this returns correct button console.log(this.$el.find('button')); //this returns 0 occurences (WTF?) </code></pre> <p><strong>EDIT</strong>: After little change at <code>el: "#app"</code>, still same problem. Problem was (thanks to @nemesv) in instantiating this class before DOM is loaded. But however, it's not possible to instantiating after DOM is loaded, because then it's not possible to use that namespace structure (eg. App.Model.Post = Backbone.Model.extend() ). But this "main view with namespace structure" is introduced in codeschool.com course as some sort of good practice. Solution can be found there <a href="http://jsfiddle.net/BckAe/" rel="nofollow">http://jsfiddle.net/BckAe</a></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