bind() in jquery 3.x

Question

I recently had to upgrade my JQuery version, one of my plugins stopped working as a result. I used the migrate plugin, I changed all the bind() to on(), but to no avail.

I use jQuery Parallax 1.1.3 by Ian Lunn (found here)

Inside of the called function there is the line

$window.bind('scroll', update).resize(update);

where update is a function. I changed this to

$window.on('scroll', update()).resize(update());

but update() isn't being called. $window.scroll() also isn't helping.

What can I do to restore functionality of my old functions?

Please create a [mcve] - we do not know what `$window` or `update` is. It should be `$(window)` but we are guessing. Adding () certainly do not help unless the new update function returns a function — mplungjan, Feb 20 '17 at 09:30
First adding `()` after function name will call it immediately. Try `$window.on('scroll', update).resize(update)`. My guess is `update` function does not return anything so no function is being attached to event — Rajesh, Feb 20 '17 at 09:30
Why have you changed `update` to `update()`? This way, this function is called immediatelly at the time of `on` calling and jQuery tries to bind `scroll` and `resize` events to the **result of `update` function execution**. Try `$window.on("scroll resize", update);`. It should work. — Yeldar Kurmangaliyev, Feb 20 '17 at 09:31
or even `$(window).on(...` in case $window is not what we think it is — mplungjan, Feb 20 '17 at 09:32
Possible duplicate of [Event listener not working?](http://stackoverflow.com/questions/22238722/event-listener-not-working) — Rajesh, Feb 20 '17 at 09:37
I tried to make my question as compact as possible, my appologies if it wasn't clear enough. `$window` indeed refers to `$(window)`, the event also isn't working without the brackets. I can include the source of the plugin if you want, there is already a link. Upgrading to JQuery version 2 gives me no error, I was just wondering wat had changed in version 3. — Arne Clicteur, Feb 20 '17 at 09:54

Shubham Sharma · Answer 1 · 2017-02-22T10:05:35.117

0

Here's the example with $window.scroll()

https://jsfiddle.net/sn7jr0ba/

function alertTemp(){
console.log("scrolled");
}
$( window ).scroll(alertTemp);

edited Feb 22 '17 at 10:05

answered Feb 20 '17 at 09:44

Shubham Sharma

315
2
18

Don't alert an event that is triggered so often. Instead console.log it – mplungjan Feb 20 '17 at 12:53

score 0 · Answer 2 · answered Feb 20 '17 at 09:53

0

You're on the right direction for changing all .bind() to .on() for the newest jQuery, but you shouldn't use brackets in second parameter. Change this:

$window.on('scroll', update()).resize(update());

To this:

$window.on('scroll', update).resize(update);

It should work now. :)

answered Feb 20 '17 at 09:53

Taufik Nur Rahmanda

1,862
2
20
36

Thanks for your comment. The event also isn't working without the brackets, that was my first try. I can include the source of the plugin if you want, there is already a link. Upgrading to JQuery version 2 gives me no error, I was just wondering wat had changed in version 3. – Arne Clicteur Feb 20 '17 at 10:09
You're welcome! The event handling with on is already correct, so if this still not work, maybe the problem is in `$window` variable which pointing to element (I assume it refer to `$(window)` element), or what inside the `update()` function. – Taufik Nur Rahmanda Feb 20 '17 at 11:04
@ArneClicteur How about console.log? Any error message there? Maybe there's some clue. – Taufik Nur Rahmanda Feb 20 '17 at 11:06

score 0 · Answer 3 · answered Feb 20 '17 at 10:08

0

yes, remove the (),

Also you can group the events to make it more readable

$window.on('scroll resize', update);

answered Feb 20 '17 at 10:08

Toni Michel Caubet

19,333
56
202
378

bind() in jquery 3.x

3 Answers3