silver silver - 5 months ago 16
jQuery Question

$(this).addClass('why-you-no-working'); not working on waypoint?

I just tried way points today as it looks awesome,

However, I'm having a hard time trying to make things work,

first simple test, works perfectly,

$('.parallax').waypoint(function() {
alert('I work');
});


But when i use $(this), it wont work, e.g.

$('.parallax').waypoint(function() {
$(this).addClass('why-you-no-working');
});


you can see the sample from here -> http://jsfiddle.net/4D3bH/425/

the second box should have black background color instead of blue, but for some reason its simple doesn't work,

if I use something like below, it works fine though, its

$('.parallax').waypoint(function() {
$('.parallax').addClass('why-you-no-working');
});


Spent almost three hours trying to get it working, but no luck,

Please help :)

Answer

In this case this does not refer to DOMElement. You can get reference to DOMElement, inside callback, through property this.element

$('.parallax:nth-of-type(2)').waypoint(function() {        
    $(this.element).addClass('why-you-no-working');
},{offset: '1%'}); 

Example