クリックしたときにテキストエレメントを入力フィールドタイプのテキストに変換し、クリックしたときにテキストに戻る

Question

フィールドをフライで変更してフォームを作成しようとしています。

簡単なテキストで始まり、誰かがこのテキストをクリックすると、編集可能なテキスト入力フィールドに移動します。誰かがクリックすると、編集不可能なテキストに戻ります。

私はそれを行ったが、正しく動作していないようだ。最初の数回のクリックでうまく動作しますが、入力IDが失われてボタンがミックスされています。ここで

は、HTML

<p id="firstElement" onclick="turnTextIntoInputField('firstElement');">First Element</p> 
<p id="secondElement" onclick="turnTextIntoInputField('secondElement');">Second Element</p> 

されており、ここにはJavaScript（jQueryのを使用して）です。

それは最高品質のコードではないかもしれないので、私はここで

function turnTextIntoInputField(inputId) 
{ 
    console.log(inputId); 
    inputIdWithHash = "#"+inputId; 
    elementValue = $(inputIdWithHash).text(); 
    $(inputIdWithHash).replaceWith('<input name="test" id="'+inputId+'" type="text" value="'+elementValue+'">'); 

    $(document).click(function(event) { 
     if(!$(event.target).closest(inputIdWithHash).length) { 
      $(inputIdWithHash).replaceWith('<p id="'+inputId+'" onclick="turnTextIntoInputField(\''+inputId+'\')">'+elementValue+'</p>'); 
     }  

    }); 
} 

が、それは私に頭痛を与えているとして、私は任意の助けに感謝しますフィドルhttps://jsfiddle.net/7jz510hg/

上の実際の例です... JavaScriptでかなり新しいです...

Answer 1

まず、html自体にonclickを使用する必要はありません。

そして、ここであなたがかかる場合があります別のアプローチです：

/** 
 
    We're defining the event on the `body` element, 
 
    because we know the `body` is not going away. 
 
    Second argument makes sure the callback only fires when 
 
    the `click` event happens only on elements marked as `data-editable` 
 
*/ 
 
$('body').on('click', '[data-editable]', function(){ 
 
    
 
    var $el = $(this); 
 
       
 
    var $input = $('<input/>').val($el.text()); 
 
    $el.replaceWith($input); 
 
    
 
    var save = function(){ 
 
    var $p = $('<p data-editable />').text($input.val()); 
 
    $input.replaceWith($p); 
 
    }; 
 
    
 
    /** 
 
    We're defining the callback with `one`, because we know that 
 
    the element will be gone just after that, and we don't want 
 
    any callbacks leftovers take memory. 
 
    Next time `p` turns into `input` this single callback 
 
    will be applied again. 
 
    */ 
 
    $input.one('blur', save).focus(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p data-editable>First Element</p> 
 
    
 
<p data-editable>Second Element</p> 
 
    
 
<p>Not editable</p>

Answer 2

フィドル：https://jsfiddle.net/7jz510hg/1/

問題がでinputIdWithHashとelementValue変数を定義しないことによってでしたvarはグローバル変数になりました。

var inputIdWithHash 
var elementValue 

グローバルスコープを持っていたので、それらの古い値はドキュメントのクリックハンドラで使用できました。そのturnTextIntoInputField関数内でローカルスコープにしたいとします。

と値を維持するアップデート：私はオフの代わりにアンバインド機能を使用する必要がありましたhttps://jsfiddle.net/7jz510hg/2/

サイドノート、あなたはjQueryの1.6を使用しています。

更新フィドル：https://jsfiddle.net/7jz510hg/3/

は、このイベントが私たちはそのため私たちはフィールド間をクリックして、何かを失うことはありませんすることができ、文書に複数のクリックイベントを添付することができます名前空間を、最新のjQueryを使用しています。クリックフィールドの代わりにフィールドを直接クリックした場合、ドキュメントをクリックしてフィールドをクリックすると、以前のフィドルが壊れてしまいます。