Attach constructor function method as handler using jQuery

Question

So, I have this:

function foo(){

  var that = this;

  this.elements = [
    $bar = $('.bar'),
    $foo = $('.foo')
  ];

  this.example = function(){
    alert("a");
  }

  this.elements.$bar.on('click', that.example);
}

and it's not working, however if I change this line:

  this.elements.$bar.on('click', that.example);

for this one:

  this.elements.$bar.on('click', function(){ that.example() });

That is, wrapping the method into an anonymous function, it does work...

EDIT: It also works if the method is not within the constructor function..

Marylyn Lajato · Accepted Answer · 2017-03-11 03:16:27Z

1

I think there's nothing wrong with how you attach your method in your current code. Though I notice that you've called your DOM Element like this:

this.elements = [
    $bar = $('.bar'),
    $foo = $('.foo')
];

this.elements.$bar

Instead, try to assign them as an object:

this.elements = {
    $bar : $('.bar'),
    $foo : $('.foo')
 };

Then in your code:

this.elements.$bar.on('click', that.example);

Here's a sample jsfiddle for further details: http://jsfiddle.net/b1bsc1rd/

Hope this helps for you

answered Mar 11, 2017 at 3:16

Marylyn Lajato

1,1711 gold badge10 silver badges15 bronze badges

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

1 Comment

nick Over a year ago

Oh, I figured it out, the event attachment has to be after the method, otherwise it's undefined and jQuery ignores it and doesn't throw any error, if you want, edit your answer so this can be useful to others that in the future may have the same question.

Collectives™ on Stack Overflow

Attach constructor function method as handler using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related