Any reason why this .click is not working

Question

I have this page that i have a rotate slideshow running. I have it currently changing every second for testing. The slideshow works great but stopping it it not easy for some reason. I have a link on the top that should stop it.

<a class="stop" href="#">Stop to play the video</a>

$('.stop').click(function(){
   $('#slideshow').cycle('stop');
});

This should stop the script but doesnt. But if you open up firebug and paste this line into the console the script stops. What gives?

   $('#slideshow').cycle('stop');

Answer 1

Just had a closer look at your code and you're emitting the javascript outside of your $(document).ready(...) handlers and before the element in the html, so you're trying to attach the event to an element that doesn't exist.

Either move your click handler inside a the $(document).ready(...) or put it below the link in the html.

Answer 2

It may be a timing issue, on page load I am getting this message in FireBug:

[cycle] terminating; zero elements found by selector
[cycle] terminating; too few slides: 1
[cycle] terminating; zero elements found by selector
[cycle] terminating; zero elements found by selector
[cycle] terminating; zero elements found by selector
[cycle] terminating; zero elements found by selector

However if I execute the following code after the page loads, the link works correctly.

$('.stop').click(function(){
$('#slideshow').cycle('stop');
});

Answer 3

Use the $.live() or $.delegate() methods instead - they will bind to all current and future elements that match the selector.

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Answer 4

do you have more than one elements to which the class "stop" has been added in that case you might run into a problem. if the above is the case you can try the following:

$('a.stop').click(function(){
   $('#slideshow').cycle('stop');
});

if you have more than one link with class stop then if you want to bind each one of them you should do something like this

$('a.stop').each(function(){
$(this).each("click",function(){
   $('#slideshow').cycle('stop');
});
});

if you want to bind only one of the links then just add an id property and then bind it to the element after getting the element by id.

Note: I am assuming that you are binding the elements after page load only.