Ending up with multiple calls (due to cyclical referencing) - JQuery
<p>My objective is fairly simple. In my webapp, I have two pages and I want to call each one from the other page.</p>

<p>But the way I have implemented the function calls in Javascript seems to be flawed. I have read up on <code>closure</code>, <code>bubbling</code>, <code>recursion</code> and <code>event.stopPropagation()</code>, but still not sure what the right way to go about implementing this.</p>

<p>Here's the smallest code that I could reproduce my problem in.</p>

<pre>
    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();
    });
}
</pre>

<p>After clicking the divs a few times, I end up with <strong>numerous</strong> alert's popping up. I just want each call to be executed once. Clearly, I am missing the way to terminate the function call.</p>

<p>Any help appreciated.</p>
