jQueryのは、前にすべてのスパンの内容を取得し、選択した

Question

た後、私はこのコードを書いた： 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"); 
}); 

今私がしたいのボックスが開き、ユーザが入力ボックスからblursの場合は、それに応じてpの単語を変更する必要があります。

QUESTION

どのように私は、入力ボックスが表示された場合のテキストの前と後のすべてのテキストを得ることができますか？ 次に、pの値をリセットしますか？

Answer 1

- それはうまくいけば、まだあなたが望む効果が得られますそれを変更：

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"); 
}); 

そして、それは私がRESOLV

Answer 2

私はので、私は少しあなたのブリーフを適応し、これを試してみてください「ぼかし」イベントといくつかの奇妙な振る舞いを持っていた - ちょうど

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

http://jsfiddle.net/ipr101/Sx85y/