title: Scope issue inside a custom object
body: <p>I think I am having a scope visibility issue I can't figure out exactly: when I log the variable <code>displayatonce</code> I get back the right result, but as I try to use the buttons I get nothing in return. I have also tried to log <code>this.navbuttons</code> but all I get is an empty set... I really don't get what's wrong with this code.</p>
  
  <pre><code>&lt;!-- html code --&gt;
  &lt;div id="nav"&gt;
  &lt;a href="#" data-dir="prev"&gt;Previous&lt;/a&gt;
  &lt;a href="#" data-dir="next"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  
  /* Js Script with jQuery */
  (function() {
  
  var NewsNavigator = {
  
      init: function(config) {
          this.navbuttons = config.navbuttons;
          this.displayatonce = config.displayatonce;
          this.counter = 0;
          this.showNews();
          this.enableNav();
  
      },
  
      showNews: function() {
          console.log(this.displayatonce);
      },
  
      enableNav: function() {
                      console.log(this.navbuttons);
          this.navbuttons.on('click', function() {
              console.log("clicked");
          });
      }
  
  };
  
  NewsNavigator.init({
      displayatonce: 3,
      navbuttons: $('div#nav').find('a')
  });
  })();
  </code></pre>