0

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

但是我在 Javascript 中实现函数调用的方式似乎有缺陷。我已经阅读了closure、和bubbling，但仍然不确定实现这一点的正确方法。recursionevent.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 后，我最终弹出了许多警报。我只希望每个调用都执行一次。显然，我错过了终止函数调用的方法。

任何帮助表示赞赏。

4

4 回答 4

4

您的

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

和

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

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

于 2012-08-22T21:52:32.790 回答
1

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

将点击绑定代码移动到您的 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()（如Golf所描述的），则可以将每一.click()行更改为.unbind().click().

于 2012-08-22T22:02:45.313 回答
0

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

$div2.click(函数)

于 2012-08-22T21:52:48.513 回答