Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery click event not firing?

Tags:

jquery

I have this PAGE and I have if you scroll down the map to the li here is my code

HTML

<ul class="play_navigation">     <li class="active"><a class="barino_story_bottom" href="#">The Story</a></li>     <li><a class="barino_video_bottom" href="#">The Video</a></li>     <li><a class="barino_gallery_bottom" href="#">The Gallery</a></li>     <li><a class="barino_equipment_bottom" href="#">The Equipment</a></li>                           </ul> 

my jQuery

<script type="text/javascript">     $(document).ready(function(){         $('.play_navigation a').click(function(){             console.log("this is the click");             return false;         });     }); </script> 

Nothing is happening at all if I click on the links....you can view source and see its there...but if I paste it in console it works fine...what gives

like image 292
Matt Elhotiby Avatar asked Apr 04 '11 15:04

Matt Elhotiby


People also ask

Why my click event is not working in JQuery?

If the elements weren't there at bind-time, you will need to use live (or event delegation, preferably). Otherwise, you need to check your code for something else that would be removing the binding. I didn't know about this $(document). on('click', '#ID', function(){ } I was trying with the old $("button").

Why click is not working?

On both Windows 10 and 7, head to Control Panel > Hardware and Sound > Mouse. Ensure the “Turn on ClickLock” option is unchecked here. It's possible that a hardware driver issue could be causing issues with recognizing your mouse button's clicks, too.

What does OnClick return in Javascript?

Means it will keep you on the same page if the function returns false and you can fill up the value into the field again.


2 Answers

Is this markup added to the DOM asynchronously? You will need to use live in that case:

NOTE: .live has been deprecated and removed in the latest versions of jQuery (for good reason). Please refer to the event delegation strategy below for usage and solution.

<script>     $(document).ready(function(){         $('.play_navigation a').live('click', function(){             console.log("this is the click");             return false;         });     }); </script> 

The fact that you are able to re-run your script block and have it work tells me that for some reason the elements weren't available at the time of binding or the binding was removed at some point. If the elements weren't there at bind-time, you will need to use live (or event delegation, preferably). Otherwise, you need to check your code for something else that would be removing the binding.

Using jQuery 1.7 event delegation:

$(function () {      $('.play_navigation').on('click', 'a', function (e) {         console.log('this is the click');         e.preventDefault();     });  }); 

You can also delegate events up to the document if you feel that you would like to bind the event before the document is ready (note that this also causes jQuery to examine every click event to determine if the element matches the appropriate selector):

$(document).on('click', '.play_navigation a', function (e) {     console.log('this is the click');     e.preventDefault(); }); 
like image 74
Eli Avatar answered Oct 17 '22 00:10

Eli


You need to prevent the default event (following the link), otherwise your link will load a new page:

    $(document).ready(function(){         $('.play_navigation a').click(function(e){             e.preventDefault();             console.log("this is the click");         });     }); 

As pointed out in comments, if your link has no href, then it's not a link, use something else.

Not working? Your code is A MESS! and ready() events everywhere... clean it, put all your scripts in ONE ready event and then try again, it will very likely sort things out.

like image 32
Capsule Avatar answered Oct 16 '22 23:10

Capsule