Binding a click event in my JavaScript module

Question

Since I started structuring my JavaScript as a module pattern, 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?

try $('body').on('click', s.barButton.attr("id"), function (event){... instead. — Hugo S. Mendes
– Hugo S. Mendes, Commented May 2, 2016 at 20:06
Since you have a reference to the object that was created (ie, s.fooButton or s.barButton) there is no need to use $('body').on('click', 'selector', ...). You can simply use s.fooButton.on("click", function... — James
– James, Commented May 2, 2016 at 20:32

Sushanth -- · Accepted Answer · 2016-05-02 20:11:30Z

1

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"

answered May 2, 2016 at 20:11

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard · Accepted Answer · 2016-05-02 20:08:33Z

0

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. :)

answered May 2, 2016 at 20:08

Richard

7091 gold badge11 silver badges22 bronze badges

Comments

odnamrataizem · Accepted Answer · 2016-05-02 20:12:06Z

0

When using .on() for event delegation, the second parameter has to be a string. Passing anything else won't work.

http://api.jquery.com/on/#on-events-selector-data

answered May 2, 2016 at 20:12

odnamrataizem

2312 silver badges7 bronze badges

Collectives™ on Stack Overflow

Binding a click event in my JavaScript module

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related