Calling multiple functions from within jQuery .on("change"... event)

Question

I want to call two functions when myValue changes, and while this works just fine:

this.myValue.on("change", $.proxy(self.functionOne, self));
this.myValue.on("change", $.proxy(self.functionTwo, self));

neither function is called in this case:

this.myValue.on("change", function () {
    $.proxy(self.functionOne, self);
    $.proxy(self.functionTwo, self);
})

It isn't a huge deal to me if I can't call both functions within one change event like this right now, but I'm pretty new to jQuery and would like to learn why.

Rory McCrossan · Accepted Answer · 2015-04-16 13:01:13Z

8

You need to call the functions defined in the $.proxy():

this.myValue.on("change", function () {
    $.proxy(self.functionOne, self)();
    $.proxy(self.functionTwo, self)();
})

Note the trailing ().

answered Apr 16, 2015 at 13:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Liam Over a year ago

Wow, that took me a while to spot :)

Felix Kling Over a year ago

Mmh, why not just self.functionOne()? ;)

Liam · Accepted Answer · 2015-04-16 13:03:53Z

3

The $.proxy method will just return a function, but not call it. You can use:

self.functionOne.call(self);
self.functionTwo.call(self);

The call function calls the function, and you get to pass in the 'context' ie. what gets used as 'this' within the function, much like in $.proxy.

edited Apr 16, 2015 at 13:03

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Apr 16, 2015 at 13:00

graycodes

3632 silver badges13 bronze badges

Comments

adeneo · Accepted Answer · 2015-04-16 13:20:52Z

3

Use the native apply or call instead

this.myValue.on("change", function() {
    self.functionOne.apply(this, arguments);
    self.functionTwo.apply(this, arguments);
});

$.proxy takes a function and returns a new one that will always have a particular context, and that works when the returned function is referenced, but not the way you're doing it in the callback as the returned function is never called.

You could of course use $.proxy and just call the returned function as well

this.myValue.on("change", function () {
    $.proxy(self.functionOne, self)();
    $.proxy(self.functionTwo, self)();
});

or just let jQuery handle it, it optimizes events and uses an internal queue anyway

this.myValue.on("change", self.functionOne);
this.myValue.on("change", self.functionTwo);

edited Apr 16, 2015 at 13:20

answered Apr 16, 2015 at 12:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Kresimir Pendic · Accepted Answer · 2015-04-16 13:07:40Z

0

Why can't you call it simple like this?

this.myValue.on("change", function () {
    functionOne();
    functionTwo();
})

answered Apr 16, 2015 at 13:07

Kresimir Pendic

3,6471 gold badge24 silver badges28 bronze badges

3 Comments

A. Wolff Over a year ago

i guess this != self

Felix Kling Over a year ago

What makes you think he functions are available in the current scope?

Kresimir Pendic Over a year ago

good point @FelixKling but,, isn't he proxying to self,, or current scope?

Collectives™ on Stack Overflow

Calling multiple functions from within jQuery .on("change"... event)

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related