Question

It seems that variables in this function are being overwritten with each call to edit() function.

function edit(el)
{
    $edit_img = $(el);
    $btn = $('<img width="15" height="15" src="images/add.png">');

    $edit_confirm = $edit_img.parent();

    $edit_confirm.append($btn);

    function restore_span()
    {
        $edit_img.show();

        $btn.remove();
    }

    $btn.click(restore_span);

    $edit_img.hide();
}

Edit function is called from this onclick handler:

<img src = "images/edit-icon.png" width = "15px" height = "15px" onclick="edit(this)" />

When invoking edit() on several images like the one above only image, which was created most recently gets removed.

How should I modify this function in order to fix this behaviour?

Answer 1

Unlike PHP, variables in JavaScript are not implicitly local to the block or function.

To declare variables as local to the function scope, use var statements:

function edit(el) {
    var $edit_img = $(el), // use them with comma
        $btn = $('<img width="15" height="15" src="images/add.png">');
    var $edit_confirm = $edit_img.parent(); // or just multiple times
    $edit_confirm.append($btn);
    $btn.click(function restore_span() {
        $edit_img.show();
        $btn.remove();
    });
    $edit_img.hide();
}