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() 中即可。