Up until this point, I haven't done much in javascript. I recently started playing with jQuery and came across a tutorial on how to do Edit in Place on a form.

The resulting code works perfectly if you hard-code the id of your container div in the function, but I'm having issues generalizing it for an id passed in to the function.

The code starts like this:

$(document).ready(function() {

    setClickable($('#editInPlace'));

});



function setClickable(target)

{

    $(target).click

    (

        function()

        {

            //Do some dom manipulation



            $('.buttonA').click(function() { saveChanges(this, false); });

            $('.buttonB').click(function() { saveChanges(this, true); });

        }

    )



    .mouseover(function() { $(this).addClass(editable); })

    .mouseout(function() { $(this).removeClass(editable); });

}; //end of function setClickable



function saveChanges(obj, cancel)

{

    //Handle the save changes code



    //Reset the div

    $(obj).parent().after('<div id=editInPlace>' + t + '</div>').remove();



    //Call setClickable

    setClickable($('#editInPlace'));

}

The part I'm having issues with is the last call to setClickable inside of the saveChanges function. If I hard-code the value of $('#editInPlace'), it works fine. However, if I change the function signature to

function saveChanges(target, obj, cancel)

and pass in the target object from the setClickable method:

$('.buttonB').click(function() { saveChanges(target, this, true); });

calling

setClickable(target);

doesn't seem to work and I can't figure out why.