JQueryでクリック時の入力値を編集する方法

JQueryでマインドマッピングツールを構築しようとしていますが、私はdivコンテンツの編集に苦労しています。JQueryでクリック時の入力値を編集する方法

私は、（mind-container）divにテキストを追加する機能を書いています。それはうまくいく。しかし、それが設定されたテキストを編集することはできません。ここで

は実際の例である：ここではhttps://jsfiddle.net/TiOw87/c9wwe81d/5/

は私のjQueryの機能である：

$('.mind-container').click(function(){ 
    $('input').addClass('active'); 
    $('input').parent().find('input').focus(); 
    $('input').keyup(function(event){ 
     if(event.keyCode == 13){ 
      var string = $(this).val(); 
      $(this).removeClass('active'); 
       if ($(this).has("p")) 
      { 
       $(this).parent().html("<p>"+ string +"</p>") 
      } 
      else 
      { 
       $(this).parent().append("<p>"+ string +"</p>") 
      } 
     } 
    }) 
});

そして、私のHTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<body> 

    <div id='board'> 
    <div class='mind-container' id='mind-master'> 
     <input type="text"> 
    </div> 

    </div> 

</body>

私のことができるようにしたいと思いますdivをクリックし、すでに入力されている入力テキストの値を編集できるようにします。あなたの助けのための

おかげ

出典

2016-11-27 RayedB

あなたのdivで 'contenteditable'属性を使用してみませんか？ http://html5demos.com/contenteditableこちらをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content –

ここでの問題はhas()の使用状況です。 http://api.jquery.com/has/has()は、一致する要素の集合を減らし、ブール値を返しません。そして、jQueryオブジェクトは常に真実であるため、ロジックは最初の条件を実行して、html()を使用して、divの全内容をp文字列に置き換えます。副作用として、あなたの入力ボックスはもはや対話することができません。

条件をhas(...).lengthに変更すると、常に真実の問題が解決されますが、html()を実行して入力ボックスを削除する可能性があります。

キーノートハンドラ内でネストされたバインディングを行うことに別の問題があり、複数のバインディングが発生します。これも修正する必要があります。

出典

2016-11-27 15:30:00 Taplar

ありがとうございます。私は純粋にそれがブール値を返すと思った。 .lengthを追加すると、私の条件付きの問題が解決されました。また、私のfuctionの最初の行に$（ 'p'、this）を追加したので、編集が保存される前に以前の入力が消去されます。しかし、私はdivがクリックされた時間の数である別の問題があります。たとえば、最初に「1」の値を与えて、正しく表示します。もう一度クリックし、 "1"を "Hello"に置き換え、 "HelloHello"が表示されます。 1回目の入力時にクリックして編集するために2回目をクリックしたのと同じように、関数は2回実行されます。 – RayedB

最後の部分で言及しているネストされたバインディングのため正解です。イベントハンドラを単一の要素に繰り返しバインドするべきではありません。 – Taplar

JQueryでクリック時の入力値を編集する方法

答えて

関連する問題