javascript - 以多次调用结束(由于循环引用) - JQuery

Question

我的目标相当简单。在我的网络应用程序中，我有两个页面，我想从另一个页面调用每个页面。

但是我在 Javascript 中实现函数调用的方式似乎有缺陷。我已经阅读了 closure、bubbling、recursion 和 event.stopPropagation()，但仍然不确定是什么实现这一点的正确方法。

这是我可以重现问题的最小代码。

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

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


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

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

    alert("first called");

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


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

    alert("second called");
    $div1.hide();
    $div2.show();

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

点击 div 几次后，我最终弹出了大量警报。我只想让每个调用执行一次。显然，我缺少终止函数调用的方法。

感谢任何帮助。

Answer 1

你的

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

和

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

应该位于您的init()函数内。每次调用它们时，您都会向 div 添加另一个单击处理程序。您只想添加它们一次，因此只需将它们放入 init() 中即可。