Question: Since I started structuring my JavaScript as a [module pattern](https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/), some of my click events no longer work. Since other parts of my JavaScript add HTML to the DOM, I need to use `$('body').on('click')` for a button.

This is what my module currently looks like:

```
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)
  }    

};

```

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?

Answer: 
The second argument for your handler when the event is delegated is expected to be a **string**.

In your case it is a **jQuery Object**.
That is the root cause your click event is not working.

Change 

```
barButton: $(".bar-button")

```

to 

```
barButton: ".bar-button"

```
If you're creating the element in JS, you have to bind the event AFTER the element is created.

So put the binding event in a function, then call that function after your JS code has created the element. :)