1

第一个函数根据单击的项目从隐藏的 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>
4

5 回答 5

7

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

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

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

于 2013-05-08T15:20:18.537 回答
3

使用 on 而不是通过单击绑定，这样当您更改元素的类时，事件将与新类绑定。

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

委托事件

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要，即 Reference。

于 2013-05-08T15:19:36.673 回答
1

您需要使用on, 而不是click快捷方式。该on方法适用于当前和未来的元素。

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

于 2013-05-08T15:19:48.303 回答
1

#orange_box注册点击时为空 - 所以它注册在一个空列表中 - 所以它什么也不做。

您想使用 jquery on( http://api.jquery.com/on/ ) 像这样绑定点击

$('#orange_box').on('click', '.secondlist a', function() {...});
于 2013-05-08T15:20:37.907 回答
1

当您将 .secondlist 的 HTML 复制到 #orange_box 时，事件不会随之发生。您需要在将事件复制到#orange_box 后绑定事件，或者只是移动 dom 节点本身。

于 2013-05-08T15:21:01.507 回答