title: Confusion with modules and refactoring JS/jQuery
body: <p>I am attempting to adopt 'best practices' for writing Javascript, specifically writing modules. I am refactoring a piece of code at the moment but am having some problems with the jquery selectors. </p>
  
  <p>The first (ugly) code is functioning as I'd expect. However, the click event on the module isn't firing and it seems like the selectors aren't being properly assigned. </p>
  
  <p>Any advice on syntax, organization or general abstraction philosophy would be greatly appreciated. And more importantly, what am I doing wrong in the module?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Messy jQuery
  
  $(function() {
    $div1 = $('#div1');
    $div2 = $('#div2');
    $button = $('#button');
  
    $('#button').click(function() {
      $div1.fadeOut();
      $div2.fadeIn();
    })  
  });
  
  // Attempted Module
  
  (function (){
  
    var interface = {
      init: function() {
        this.cacheDom();
        this.bindEvents();
      },
      cacheDom: function() {
        this.$div1 = $('#div1');
        this.$button = this.$div1.find('button');
        this.$div2 = $('#div2');
      },
      bindEvents: function() {
        this.$button.on('click', this.swapDiv.bind(this));
      },
      swapDiv: function() {
        this.$div1.fadeOut();
        this.$div2.fadeIn();
      }
     }
     interface.init();
  })()</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt;
    &lt;button id="button"&gt;Swap Div&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="div2"&gt;
    &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>