Question

Here’s the code:

$("#textBox").focus(function() {
  $("#textBox").replaceWith('<textarea id="textBox">' + $(this).val() +'</textarea>');
});

$("#textBox").blur(function() {
    $("#textBox").replaceWith('<input type="text" class="questionInput" value="' + $(this).val() + '" id="textBox">');
});

<input name="input1" class="questionInput" id="textBox" type="text">

The focus function works, but the blur function does not work. I’ve already tried a simplier function on blur like alert.

Answer 1

You need to use the live, because you are replacing the current element, which has no blur bound to it.

So try this:

$("#textBox").live("focus",function() {

    $("#textBox").replaceWith('<textarea id="textBox">' + $(this).val() +'</textarea>');

});

$("#textBox").live("blur", function() {

    $("#textBox").replaceWith('<input type="text" class="questionInput" value="' + $(this).val() + '" id="textBox">');

});

<input name="input1" class="questionInput" id="textBox" type="text">