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.
Change:
to:
You’re passing in a wrapped set (also called a jQuery object) and then wrapped it in another wrapped set. The above fixes that. The alternate way to do this is:
You see what I’m getting at?