Question

Fiddle me this:

http://jsfiddle.net/TrySpace/QZMP6/17/

After editing the input field, the html updates on each element, but I want to reenable/restore the click event..

I tried making the click event an external function, but I can’t seem to get the ‘this’ to work properly/communicate with the function…

Can’t seem to find good explanations how to pass events to functions…

As you can see in the fiddle, I try to do:

$(this).on("click");

But off-course it defines nothing so it won’t work, so I’ll have to re-call/re-assign the whole function.?

Answer 1

You can define the function as a variable. That way you can just reference it in the click handler by its variable name:

http://jsfiddle.net/QZMP6/25/

var clicky = function()
{
    var currentClickedDIV = this.id;
        $('#output').append("Clicked: "+currentClickedDIV +"<BR>");   
    var currentClickedDIVContent = $(this).html();
        $('#output').append("HTML: "+currentClickedDIVContent +"<BR>" );  

   //Make current html content editable
   $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>");

     //prevent more triggers within element       
   $(this).off("click").on("click", function (e) {
        e.stopPropagation();
    });
    //Focus cursor on input
    $("#currentInput").focus();

    var $that = $(this);
    //On blur replace with plain html, also reenable click?
    $("#currentInput").blur(function(){
        var currInput = $("#currentInput").val();
        $("#"+currentClickedDIV).html(currInput );
        $('#output').append("New HTML: "+ currInput  +"<BR>" );
        $that.on("click", clicky);
    });


    return false;
}

$('.cuboid').on('click', clicky );