jQuery click event not firing?

Question

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

Ferriferous

Answer 1

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();
});

Senhorita

I didn't know about this $(document).on('click', '#ID', function(){ } I was trying with the old $("button").click(function(){} technique and wasted my most of the day. Thumbs-up! – Foxy

Similar questions with similar answers did not explain why we needed to use event delegation with enough precision. Others said it was needed for after document load (not always true), and others said always to use it (not always). This is the only acceptable explanation as to when .on() must be used instead of .click() - when your DOM elements you thought your events were bound to no longer exist because of a DOM manipulation. – Aircool

The only option that worked for me was delegating the event up to the document. Not sure why. – Tybi

Answer 2

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.

Centerpiece

They shouldn't. By using preventDefault() you don't need these hacks. If the link has no href, then it shouldn't be a link, just use a span or a button. – Centerpiece

return false does the same thing as preventDefault() as a bonus it also prevents propagation up the DOM – Valerlan

I'm inclined to agree with Capsule, your HTML is not being drawn dynamically, but the event is definitely not getting bound at the correct time in the page load. After the page is done loading, there are no events on the .play_navigation ul. You should try putting your scripts together and even better put them as the last thing loaded on the page. – Valerlan

I agree the document.ready events scattered throughout is a bad idea...i will likely create on js file and put them there....should i put that script on the top or the bottom of the page – Ferriferous

Answer 3

I was wasting my time on this for hours. Fortunately, I found the solution. If you are using bootstrap admin templates (AdminLTE), this problem may show up. Thing is we have to use adminLTE framework plugins.

example: ifChecked event:

$('input').on('ifChecked', function(event){
   alert(event.type + ' callback');
});

For more information click here.

Hope it helps you too.

Halfcocked

Answer 4

Might be useful to some : check for

pointer-events: none;

In the CSS. It prevents clicks from being caught by JS. I think it's relevant because the CSS might be the last place you'd look into in this kind of situation.

Stace

Answer 5

This is worked for me when I want specific anchor click

$(document).on('click', '.barino_story_bottom', function (e) {
  alert('The Story is clicked');
  e.preventDefault();
});

Malliemallin