click is not triggering the jquery function -
the first function places particular list hidden div depending on item clicked. function works correctly when clicking 'a' link. after clicking link, remove class list , add new class correct list item. loads hidden list orange_box div.
the second function supposed similar, not triggering on click of secondlist class. when remove 'a', thought culprit, nothing happens either. issue html content being placed in div , therefore can't 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 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>
you cannot direclty attach event handler elements don't exist yet. try delegated events.
$('#orange_box').on('click', '.secondlist a', function() {...});
you can find more information direct , delegated events on jquery official documentation. take direct , delegated events section.
Comments
Post a Comment