jquery - 点击没有触发jquery函数

Question

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

第二个函数应该执行类似的操作，但它不会在单击第二个列表类时触发。当我删除我认为是罪魁祸首的“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

您不能直接将事件处理程序附加到尚不存在的元素。尝试使用委托(delegate)事件。

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

您可以在 jquery official documentation 上找到有关直接事件和委托(delegate)事件的更多信息。查看直接和委托(delegate)事件部分。