Why jquery selector doesn't work

[davids701124]

Hi there,

 

I'm trying gs and I don't know why I can't use jquery to select the element. I must use getElementById??

//This doesn't work
var cancel = $("#cancel");
//This works
var cancel = document.getElementById("cancel");

cancel.onclick = function(){ ani.reverse(); console.log('cancel'); }

[Jonathan]

Hello and Welcome to the GreenSock Forum!

 

Im away from computer right now. But what is happening is you are using a jQuery collection wrapper object. You need to add [O] to your cancel jQuery wrapper, to make an Array notation.

 

var cancel = $("#cancel")[0];

cancel.onclick = function(){ ani.reverse(); console.log('cancel'); }

 

The jQuery selector is an Array type of wrapper. But in all honesty.. using getElementById() is much faster than using $('#cancel') .. since your element is already using an ID.

 

Hope this helps!

[GreenSock]

To be clear, it's absolutely fine to pass a jQuery object/collection to a tween like TweenLite.to( $("#cancel"), 1, {x:100}). Works great. The problem here has nothing to do with GSAP - it's that you're attaching an onclick event handler to a jQuery object instead of the element itself. So your function isn't getting called, thus the animation code doesn't run. 

 

I believe the jQuery way would be like this:

var cancel = $("#cancel");

cancel.click(function(){ 
    ani.reverse(); 
    console.log('cancel'); 
});