jQuery .click event not registering with class

Question

I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:

<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
        <div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
            <ul id="jsddm">
                <li><a href="#">Item 1</a>
                    <ul>
                        <li><a class="btn myOtherClass" href="#">Button 1</a></li>
                        <li><a class="btn myOtherClass"href="#">Button 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 2</a>
                    <ul>
                        <li><a class="btn myOtherClass" href="#">Button 3</a></li>
                        <li><a class="btn myOtherClass" href="#">Button 4</a></li>
                    </ul>
                </li>
            </ul>
        </div>

</body>

And in my script I have the following:

/* Register the click event for menu buttons */
$('.btn').click(function () { 
    alert("You clicked a button"); 
  });

The alert never fires and I'm not sure why, any help is appreciated.

UPDATE:

The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.

UPDATE 2:

Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.

When is your script executed? Is the DOM ready by the time you try to hook up the event? — Marek Karbarz
– Marek Karbarz, Commented Jun 17, 2011 at 18:45
Are your menu items a part of the HTML template, or are they dynamically generated? — George Cummins
– George Cummins, Commented Jun 17, 2011 at 18:45
@George Cummins - Yes the menus are part of the template and the classes are hard coded. There's a separate style sheet that handles styling the menu and separate script functions that handle generating the menu actions. — kingrichard2005
– kingrichard2005, Commented Jun 17, 2011 at 18:49

Shef · Accepted Answer · 2011-06-17 18:46:52Z

4

Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:

$(document).ready(function(){
    $('.btn').click(function () { 
        alert("You clicked a button"); 
    });
});

answered Jun 17, 2011 at 18:46

Shef

45.6k15 gold badges82 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kingrichard2005 Over a year ago

Thanks Shef, wrapping in the .ready function did it. I don't understand why it needs that. Why doesn't jQuery's documentation specify that in their examples? And how come "c-smile"'s link above works without wrapping in the .ready function?

Shef Over a year ago

You always need to wait for the ready event to fire, when you are accessing and manipulating DOM elements. It is documented, but sometimes we just pass by it without noticing. :) The above example works, because the DOM is already loaded there, so there is no issue there. Sometimes it might work, and sometimes not, because there are times when your DOM elements might have been loaded, and other times they might have not been loaded. The best way to know if the DOM elements have loaded, is to wait for the ready event to fire, hence why we put everything...

Shef Over a year ago

... inside the ready() function, which will execute the code we have placed inside it, once the DOM elements have been loaded. :)

kingrichard2005 Over a year ago

Thanks again Shef. I see they have the .ready in their documentation, I was just curious why they wouldn't include that in the examples in the .click section. Guess they assume people would understand that already, have to brush up on my jQuery knowledge. :)

davidosomething · Accepted Answer · 2011-06-17 18:47:52Z

0

are you using stopPropagation or return false in another click event that may have prevented the click event from happening?

Is the jQuery used after jQuery has been loaded?

Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)

answered Jun 17, 2011 at 18:47

davidosomething

3,4372 gold badges28 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery .click event not registering with class

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related