javascript - 使用 Javascript 的三级面板菜单，无法正确加载内容

Question

我尝试在我的网站上实现的导航框架存在一个小问题。编码如下:

HTML

<div class="panel1">
    first navigation ul li set
</div>
<div class="panel2" id="subnav">
    AJAX loaded navigation ul li set
</div>
<div class="panel3" id="content">
    content loaded by AJAX
</div>

Javascript

$(document).ready(function () {
    $('a.ajax-link-top').click( function( event ) {
        set_ajax_link( $(this), event );
    });
});

function set_ajax_link( el, event ){
    event.preventDefault();
    var url = el.attr("href");
    load_menu_content( url );
}

function load_menu_content( url ){
    $("#subnav").load( url, { 'ajax': 'true' }, function(){
        $('#subnav a.ajax-link').click( function( event ) {
            set_ajax_link_sub( $(this), event );
        });
    });
}

function set_ajax_link( el, event ){
    event.preventDefault();
    var url = el.attr("href");
    load_page_content( url );
}

function load_page_content( url ){
    $("#content").load( url, { 'ajax': 'true' }, function(){
        $('#content a.ajax-link').click( function( event ) {
            set_ajax_link_sub( $(this), event );
        });
    });
}

修复如下:

HTML:相同Javascript:

$(document).ready(function () {
    var panel2 = $(".panel2");
    var panel3 = $(".panel3");

    $(".panel1").click(function (e) {
        e.preventDefault();

        var url = e.target.href;
        $(".panel2").load(url);
    });

    $(".panel2").click(function (e) {
        e.preventDefault();

        var url_2 = e.target.href;
        panel3.load(url_2);
        });
});

目标是获取 ajax-link-top 类的链接以在#subnav div 中加载子导航菜单，并获取 ajax-link 类的链接以将页面内容加载到#content div，从顶部导航面板或子导航面板。

我现在得到的结果是，无论何时单击任何链接，它们都会将内容、菜单或其他内容加载到#content div 中。我确定我的 JS 代码中某处有问题，但我看不到它。

感谢任何帮助!中号

Answer 1

这假定您正在使用 jQuery。

我会采取一种稍微不同的方法，而不是将事件处理程序绑定(bind)到每个单独的链接，您可以将面板 div 本身作为目标 - 点击事件将会冒泡。它将为您节省大量重复绑定(bind)。如果容器中的元素多于一系列链接，您应该添加检查以确保在容器中单击的内容实际上是一个链接，否则如果单击非链接元素，您将收到虚假事件。这样你就只绑定(bind)了两个事件。

我添加了一个伪造的负载来模拟 AJAX 负载来进行说明。 http://jsfiddle.net/WFb8a/ 处有一个 fiddle .

HTML

<div class="panel1">
    <ul>
        <li><a id="subnav1" href="#link1">Link 1</a></li>
        <li><a id="subnav2" href="#link2">Link 2</a></li>
    </ul>        
</div>
<div class="panel2" id="subnav">
    AJAX loaded navigation ul li set
</div>
<div class="panel3" id="content">
    content loaded by AJAX
</div>

<script id="subnav1-content">
    <ul>
        <li><a id="subnav1-link1" href="#link1">Subnav1 Link 1</a></li>
        <li><a id="subnav1-link2" href="#link2">Subnav1 Link 2</a></li>
    </ul>        
</script>

<script id="subnav2-content">
    <ul>
        <li><a id="subnav2-link1" href="#link1">Subnav2 Link 1</a></li>
        <li><a id="subnav2-link2" href="#link2">Subnav2 Link 2</a></li>
    </ul>        
</script>

<script id="subnav1-link1-content">
    <h1>Content 1</h1>
</script>

<script id="subnav1-link2-content">
    <h1>Content 2</h1>
</script>

<script id="subnav2-link1-content">
    <h1>Content 3</h1>
</script>

<script id="subnav2-link2-content">
    <h1>Content 4</h1>
</script>​

Javascript

$(document).ready(function () {
    var $panel2 = $(".panel2");
    var $panel3 = $(".panel3");

    $(".panel1").click(function (e) {
        e.preventDefault();
        e.stopPropagation();

        $panel2.html($("#" + e.target.id + "-content").html());
    });

    $(".panel2").click(function (e) {
        e.preventDefault();
        e.stopPropagation();

        $panel3.html($("#" + e.target.id + "-content").html());
    });
});​