click不会触发jquery函数

Question

第一个函数根据单击的项目放置隐藏div中的特定列表.单击"a"链接时,此功能可正常工作.单击链接后,它将从所有列表中删除该类,并将新类添加到正确的列表项.然后它将隐藏列表加载到orange_box div中.

第二个函数应该做类似的事情,但它不会在点击secondlist类时触发.当我删除'a'时,我认为这是罪魁祸首,没有任何事情发生.这是HTML内容放在另一个div中的问题,因此无法定位？

<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>

Answer 1

您无法直接将事件处理程序附加到尚不存在的元素.尝试委派活动.

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

您可以在jquery 官方文档中找到有关直接和委派事件的更多信息.查看直接和委派活动部分.