0

私の目的はかなり単純です。私の webapp には 2 つのページがあり、それぞれを別のページから呼び出したいと考えています。

しかし、Javascript で関数呼び出しを実装した方法には欠陥があるようです。closure、bubbling、recursionおよびを読みましたが、event.stopPropagation()これを実装する正しい方法はまだわかりません。

これが私の問題を再現できる最小のコードです。

    関数init(){
    var $div1 = 'クリックしてページ 2 をロード';
    $("#main").append($div1);

    var $div2 = 'クリックしてページ 1 に戻ります';
    $("#main").append($div2);    
    displayFirstPage();
}


    関数displayFirstPage() {
    var $div1 = $("#div1");
    var $div2 = $("#div2");    

    $div2.hide();
    $div1.show();

    alert("最初に呼び出された");

    $div1.click(関数(){
    displaySecondPage();
    });
}


    関数displaySecondPage() {
    var $div1 = $("#div1");
    var $div2 = $("#div2");    

    alert("2 番目に呼び出された");
    $div1.hide();
    $div2.show();

    $div2.click(関数(){
    displayFirstPage();
    });
}

div を数回クリックすると、多数のアラートが表示されます。各呼び出しを 1 回実行するだけです。明らかに、関数呼び出しを終了する方法がありません。

どんな助けでも感謝します。

4

4 に答える 4

4

あなたの

$div1.click(function(){
    displaySecondPage();
});

と

$div2.click(function(){
    displayFirstPage();
});

関数内にある必要がありますinit()。それらを呼び出すたびに、別のクリックハンドラーをdivに追加します。一度だけ追加したいので、に入れてくださいinit()。

于 2012-08-22T21:52:32.790 に答える
1

問題は、表示関数が呼び出されるたびに新しい匿名関数をクリックイベントにバインドするためだと思います。

クリックバインディングコードをinit（）関数に移動します。

function init(){
    var $div1 = 'Click to Load page 2';
    $("#main").append($div1);

    var $div2 = 'Click to go back to  page 1';
    $("#main").append($div2);  

    var $div1 = $("#div1");

    $div1.click(function(){
    displaySecondPage();
    });

    var $div2 = $("#div2");

    $div2.click(function(){
    displayFirstPage();
    });    



    displayFirstPage();
}
于 2012-08-22T21:58:44.020 に答える
1

なんらかの理由で.click()関数を関数に入れたくない場合init()(ゴルフ.click()の記述など)、各行を に変更できます.unbind().click()。

于 2012-08-22T22:02:45.313 に答える
0

電話をかけるたびに新しいクリックハンドラーを追加すると思います

$ div2.click（function）

于 2012-08-22T21:52:48.513 に答える