1

我试图在我的网站上实现的导航框架有一个小问题。编码如下：

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 代码中的某个地方有些问题，但我看不到它。

任何和所有的帮助表示赞赏！米

4

2 回答 2

2

这假设您使用的是 jQuery。

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

我添加了一个伪造的负载来模拟 AJAX 负载来说明。http://jsfiddle.net/WFb8a/有一个小提琴。

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());
    });
});​
于 2012-08-05T15:10:07.587 回答
0

这是我将如何处理的。

首先，我会使用事件委托，这样我就不必担心在加载内容时绑定事件：

$(function () {
    $(document).on("click", "a.js-load-subnav", function (ev) {
        $("#subnav").load($(this).attr("href"), {ajax: "true"});
        return false;
    });
    $(document).on("click", "a.js-load-content", function (ev) {
        $("#content").load($(this).attr("href"), {ajax: "true"});
        return false;
    });
});

然后，我会适当地设置导航和子导航的 HTML，以便链接使用js-load-subnav类或js-load-content类。（我曾经js-表明这些链接仅供 JavaScript 使用，对链接样式没有用处。）

于 2012-08-05T15:03:23.277 回答