jquery click event handler not being called

Question

In my menu, I have these items:

<ul>
    <li class="menu_item" data-content_id="#landscape_context">Landscape Context</li>
    <li class="menu_item" data-content_id="#terrestrial_features">Terrestrial Features</li>
    <li class="menu_item" data-content_id="#aquatic_features">Aquatic Features</li>
    <li class="menu_item" data-content_id="#vegetaion_land_use">Vegetation/Land Use</li>
    <li class="menu_item" data-content_id="#additional_features">Additional Features</li>
    <li class="menu_item" data-content_id="#data_descriptions">Data Descriptions</li>
    <li class="menu_item" data-content_id="#faq">FAQ</li>
</ul>

Then when a user clicks on one of the items, I want to show the content for that data-content_id. However, nothing is happening when I click.

Here is the javascript:

$(".menu_item").click(function () {
    alert("Hello");
});

I've replaced the code with the simple alert which also does not show up when I click on a menu item.

I've looked at numerous of the other examples found here on SO, but couldn't find anything different about my solution.

Anybody see what I might be doing wrong here?

Thanks

Make sure it's wrapped in $(document).ready(function() {...}); so that it executes after the DOM has loaded and the elements exist. Take a look at this page of the documentation for more information. — Anthony Grist
– Anthony Grist, Commented Jan 8, 2013 at 16:27
Have you placed your code in a $(document).ready(function() { .. }); block? Are the li elements dynamically appended? — Rory McCrossan
– Rory McCrossan, Commented Jan 8, 2013 at 16:28
Ah, yes, I moved it to my .ready() and now it works! Thanks. :) — user290043
– user290043, Commented Jan 8, 2013 at 16:28
@Pow-Ian The .live() function has been deprecated since version 1.7. Using that instead of simple jQuery practices makes no sense. — Anthony Grist
– Anthony Grist, Commented Jan 8, 2013 at 16:30

Explosion Pills · Accepted Answer · 2013-01-08 16:29:31Z

2

$(document).ready(function(){
   $(".menu_item").click(function () {
       alert(  $(this).attr("data-content_id") );
   }); 
});

edited Jan 8, 2013 at 16:29

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

answered Jan 8, 2013 at 16:28

NicolaPasqui

1,1301 gold badge8 silver badges17 bronze badges

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

1 Comment

NicolaPasqui Over a year ago

@Explosion Pills thanks for the identation...still struggling with the editor :D

Explosion Pills · Accepted Answer · 2013-01-08 16:29:13Z

0

Either the elements are loaded in the DOM after your script or they are loaded asynchronously. If it's the former, just wrap everything in $(document).ready(function () {... (or $(function () {...

If it's the latter, use event delegation, such as:

$(document).on('click', '.menu_item', function () {

answered Jan 8, 2013 at 16:29

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

Ahmed Assaf · Accepted Answer · 2013-01-08 16:31:33Z

0

Try this code :

$(document).ready(function() {
   $(".menu_item").click(function () {
       alert($(this).attr("data-content_id"));
   }); 
});

answered Jan 8, 2013 at 16:31

Ahmed Assaf

6018 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery click event handler not being called

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related