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

Eli · Accepted Answer · 2013-04-23T22:38:46.373

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

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! — sohaiby, May 23 '14 at 12:27
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. — TinkerTenorSoftwareGuy, Aug 17 '17 at 20:51
The only option that worked for me was delegating the event up to the document. Not sure why. — dst3p, Jun 05 '18 at 14:16

Capsule · Answer 2 · 2011-04-04T15:31:49.163

1

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.

edited Apr 04 '11 at 15:31

answered Apr 04 '11 at 15:23

Capsule

6,118
1
20
27

4

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. – Capsule Apr 04 '11 at 15:26
3

return false does the same thing as preventDefault() as a bonus it also prevents propagation up the DOM – Drew Apr 04 '11 at 15:45
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. – Drew Apr 04 '11 at 15:50
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 – Matt Elhotiby Apr 04 '11 at 15:56

score 0 · Answer 3 · edited Oct 17 '16 at 10:11

0

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.

edited Oct 17 '16 at 10:11

Ricardo Rocha

14,612
20
74
130

answered Jun 26 '15 at 07:47

guitarlass

1,587
7
21
45

score 0 · Answer 4 · answered Apr 03 '19 at 20:57

0

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.

answered Apr 03 '19 at 20:57

Rayjax

7,494
11
56
82

jQuery click event not firing?

4 Answers4

Linked

Related