click is not triggering the jquery function

Question

The first function places a particular list from a hidden div depending on which item is clicked. This function works correctly when clicking the 'a' link. After clicking a link, it will remove the class from all the list and add the new class to the correct list item. It then loads the hidden list into the orange_box div.

The second function is supposed to do something similar, but it is not triggering on click of the secondlist class. When I remove 'a', which I thought was the culprit, nothing happens as either. Is this an issue with the HTML content being placed in another div and therefore can't be targeted?

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<ul id="firstlist" class="no-list-styles inline">
    <li class="select1"><a href="#intro">Intro</a></li> | 
    <li><a href="#1_list">Access to Mental Health</a></li> | 
    <li><a href="#2_list">Diet & Exercise</a> | 
    </li><li><a href="#3_list">Tobacco Use</a></li>
</ul>
<div class="hide" id="firstlistmenu">
    <div id="1_list">
        <ul class="no-list-styles inline secondlist">
            <li class="select2"><a href="#1_programs">Programs</a></li> | 
            <li><a href="#1_policies">Policies</a></li> | 
            <li><a href="#1_success">Success Stores</a></li> | 
            <li><a href="#1_tools">Tools</a></li> | 
            <li><a href="#1_funding">Funding</a></li>
        </ul>
    </div>
</div>
<div id="orange_box">
</div>
<script>
$(document).ready(function() {
    $('#firstlist a').click(function(){
        $('#firstlist li').removeClass('select1');
        $(this).parent().addClass('select1');
        href=$(this).attr('href');
        $('#orange_box').html($('#firstlistmenu '+href).html());
        $('#orange_box li:first').addClass('select2');
    });

    $('#orange_box .secondlist a').click(function(){
        alert('hello');
        $('.secondlist li').removeClass('select2');
        $(this).parent().addClass('select2');
    });
});
</script>

Claudio Redi · Accepted Answer · 2013-05-08 15:46:54Z

7

You cannot direclty attach an event handler to elements that don't exist yet. Try with delegated events.

$('#orange_box').on('click', '.secondlist a', function() {...});

You can find more information about direct and delegated events on jquery official documentation. Take a look to Direct and delegated events section.

edited May 8, 2013 at 15:46

answered May 8, 2013 at 15:20

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

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

1 Comment

Claudio Redi Over a year ago

@alrightgame: orange_box is empty when DOM loads, there is no element inside according html you provided.

user400654 · Accepted Answer · 2013-05-08 15:33:34Z

3

Use on instead of binding with click, so that when you change the class of element the event is binded with new class.

$('#orange_box').on('click', '.classThatChanged', function(){
    alert('hello');
    $('.secondlist li').removeClass('select2');
    $(this).parent().addClass('select2');
});

delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, Reference.

edited May 8, 2013 at 15:33

user400654

95.1k16 gold badges168 silver badges188 bronze badges

answered May 8, 2013 at 15:19

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

Foreign Object · Accepted Answer · 2013-05-08 15:19:48Z

1

You need to use on, instead of the click shortcut. The on method works for current and future elements.

$('#orange_box .secondlist a').on( 'click', function(){ alert('hello'); $('.secondlist li').removeClass('select2'); $(this).parent().addClass('select2'); });

answered May 8, 2013 at 15:19

Foreign Object

1,64011 silver badges23 bronze badges

Comments

Iftah · Accepted Answer · 2013-05-08 15:20:37Z

1

#orange_box is empty when you register the click - so it registers on an empty list - so it does nothing.

You want to use jquery on ( http://api.jquery.com/on/ ) to bind the click like so

$('#orange_box').on('click', '.secondlist a', function() {...});

answered May 8, 2013 at 15:20

Iftah

9,5722 gold badges36 silver badges45 bronze badges

Comments

Jeremiah Orr · Accepted Answer · 2013-05-08 15:21:01Z

1

When you're copying the HTML for .secondlist into #orange_box, the events are not taken with it. You need to bind the events after copying it to #orange_box, or just move the dom node itself.

answered May 8, 2013 at 15:21

Jeremiah Orr

2,6301 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

click is not triggering the jquery function

5 Answers 5

1 Comment

delegated events

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

delegated events

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related