Question

I wrote this code :
HTML

<p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time.  He went on to be the
    happiest man in the world.  The end.
</p>

JS:

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function() {
    $(this).html('<input value="'+$(this).text() +'"/>');
    $(this).unbind("click");
});

Now i want when the user clicks on the word a input box opens up and i want when the users blurs from the input box it should change the word in the p accordingly.

QUESTION

How can i get all the text before and after the text of where the input box is shown ?
And then reset the value of p ?

Answer 1

Just changed it to :

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function() {
    $(this).html('<input class="mm" value="' + $(this).text() + '"/>');
    $(this).unbind("click");
});
$("#hmm").delegate(".mm", "blur", function() {
    $(this).replaceWith("<span>"+$(this).val()+"</span>");
    $(this).bind("click");
});

And it works like charm