title: Binding a click event in my JavaScript module
body: <p>Since I started structuring my JavaScript as a <a href="https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/" rel="nofollow">module pattern</a>, some of my click events no longer work. Since other parts of my JavaScript add HTML to the DOM, I need to use <code>$('body').on('click')</code> for a button.</p>
  
  <p>This is what my module currently looks like:</p>
  
  <pre><code>var s,
  MyApp = {    
  
    settings: {
      fooButton: $(".foo-button"),
      barButton: $(".bar-button")
    },    
  
    init: function() {
      s = this.settings;
      this.bindEvents();
    },    
  
    bindEvents: function() {
      // this works
      s.fooButton.on("click", function() {
        MyApp.clickButton("foo");
      });    
  
      // this does NOT work
      $('body').on('click', s.barButton, function (event) {
        MyApp.clickButton("bar");
      });
    },    
  
    clickButton: function(button) {
      console.log("You clicked " + button)
    }    
  
  };
  </code></pre>
  
  <p>The first click event is working, the second isn't. How can I bind and event for an element that was created by JavaScript code?</p>