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のsubnavメニューをロードし、ajax-linkクラスのリンクを取得してページコンテンツを#contentdivにロードすることです。パネルまたはsubnavパネル。

私が今得ている結果は、リンクのいずれかがクリックされるたびに、コンテンツ、メニュー、またはその他の方法で#contentdivにロードされることです。JSコードのどこかに何かが入っていると確信していますが、それがわかりません。

ありとあらゆる助けに感謝します！M

4

2 に答える 2

2

これは、jQuery を使用していることを前提としています。

パネル div 自体をターゲットにできる個々のリンクにイベント ハンドラーを結び付けるのではなく、クリック イベントがバブルアップします。繰り返しのバインディングを大幅に節約できます。コンテナ内に一連のリンク以外の要素がある場合は、コンテナ内でクリックされたものが実際にリンクであることを確認するチェックを追加する必要があります。そうしないと、リンク以外の要素がクリックされた場合に偽のイベントが発生します。このようにして、2 つのイベントのみをバインドします。

説明のために、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;
    });
});

次に、nav と subnav の HTML を適切に設定して、リンクがjs-load-subnavクラスまたはクラスのいずれかを使用するようにしますjs-load-content。(私はjs-、これらのリンクが JavaScript で使用するためのものであり、リンクのスタイル設定には役立たないことを示すために使用します。)

于 2012-08-05T15:03:23.277 に答える