Question

Hi Folks,
Please help me to fix this : Suppose we call the same javascript function from anchors but with different parameter

<a id="edit1" onclick="foo(1)"></a> 
<a id="edit2" onclick="foo(2)"></a>

function foo(id)
{
// let's say the code here hide the clicked anchor and show a new anchor with cancel-edit id 
}

The scenario :

• I clicked in the first anchor – The first anchor replaced with a new anchor :
• How can i disable the function, so when i click in the second anchor it does nothng.
• Now suppose i clicked in the anchor with the id cancel-edit it will pull back the anchor with the id edit1 and reactivate the foo function so when i reclick in the second anchor it will execute again the foo function…

i hope it’s clear :X !
Thanks in advance.

Answer 1

If you want to disable it for all the elements after one is clicked, you could just set a flag:

var enabled = true;
function foo(id) {
    if( enabled ) {
        // run your code
        enabled = false;
    }
}

It will continue to run, but the code in the if statement will not after the first click.

function stop() {

    // replace the original anchor

    enabled = true; // enable the "foo" handler

}

When the new anchor with stop() is clicked, you replace it with the original anchor, and set enabled to true so that foo() will work again.