结束多次调用（由于循环引用） - JQuery答案

【问题标题】：Ending up with multiple calls (due to cyclical referencing) - JQuery结束多次调用（由于循环引用） - JQuery
【发布时间】：2012-08-22 21:48:38
【问题描述】：

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

但我在 Javascript 中实现函数调用的方式似乎存在缺陷。我已经阅读了closure、bubbling、recursion 和 event.stopPropagation()，但仍然不确定实现此功能的正确方法。

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

函数初始化（）{ var $div1 = '点击加载页面 2'; $("#main").append($div1); var $div2 = '点击返回第一页'; $("#main").append($div2); 显示第一页（）； } 函数显示第一页（）{ var $div1 = $("#div1"); var $div2 = $("#div2"); $div2.hide(); $div1.show(); alert("第一次调用"); $div1.click(函数(){ 显示第二页（）； }); } 函数 displaySecondPage() { var $div1 = $("#div1"); var $div2 = $("#div2"); alert("第二次调用"); $div1.hide(); $div2.show(); $div2.click(函数(){ 显示第一页（）； }); }

点击 div 几次后，我最终会弹出大量警报。我只希望每个调用都执行一次。显然，我错过了终止函数调用的方法。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你的

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

和

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

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

【讨论】：

【解决方案2】：

我认为问题是因为每次调用显示函数时都将一个新的匿名函数绑定到点击事件。

将点击绑定代码移动到您的 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();
}

【讨论】：

感谢@Greg Ross 的解释和代码。我为您 +1 并接受了 Golf 的回答，因为他是第一个回复的。问候，拉姆

【解决方案3】：

如果出于某种原因您不想将 .click() 函数放入您的 init() 函数中（如 golf 所描述的），您可以将每个 .click() 行更改为 .unbind().click()。

【讨论】：

【解决方案4】：

我认为你每次调用时都会添加一个新的点击处理程序

$div2.click(函数)

【讨论】：