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 official documentation上找到有关直接和委派事件的更多信息。请查看直接和委派活动部分。

Answer 2

使用on代替使用click绑定，这样当你更改元素类时，事件就会被新类绑定。

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

委派活动

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

Answer 3

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

$（'＃orange_box .secondlist a'）。on（'click'，function（）{ 警报（ '你好'）; $（'。secondlist li'）。removeClass（'select2'）; $（本）.parent（）addClass（ '选择2'）。 }）;

Answer 4

注册点击时，

#orange_box为空 - 因此它会在空列表中注册 - 所以它什么都不做。

您想使用jquery on（http://api.jquery.com/on/）来绑定点击，如此

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

Answer 5

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

click不会触发jquery函数

5 个答案:

委派活动