質問: お力をお貸しください。 input要素にて入力した値を表へ追加していく機能を実装しております。 その中で、追加した表のセルをクリックするとinput要素に変更して編集機能を実装したいとやっているのですが、うまくいかず質問させていただきました。 エラー内容としましては、html()にてinput要素に変換までできたものの、入力ができないというものです。 参考までに該当箇所のソースを以下に記載させていただきます。 ``` //編集処理 $(document).on('click','.list table td',function(){ $(this).html(''); }); ``` input要素に変換後、入力ができるようにしたいです。 誤っている点や足りないものなどございましたら、ご教授いただけないでしょうか。 その他必要な情報などございましたら、いただければ幸いです。 お手数をおかけしますが、何卒宜しくお願い致します。
回答: kei344さんもおっしゃっていますが、 今回の症状は「追加したinput」へ文字を入力しようとクリックする際に、 再度`.on('click','.list table td',function(){});`のイベントが発動している事が原因です。 `one`を使って、発動を1回だけにするのも解決策のひとつですし、 何度も編集が必要なのであれば、適当な`Class`と`:not()`を組み合わせるのも良いと思います。 例えば以下のような感じです。 ``` $(document).on('click','.list table td:not(.active)',function(){ $(this).addClass('active'); $(this).html(''); }); ``` Inputタグを追加する際に、その`td`部分に`.active`というクラスを追加しています。 そして、clickイベントとして`td:not(.active)`と指定することで、 `.active`というクラスが付いていると、イベントの対象にならない様に指示しています。 あとは編集が終わって、input要素を削除する際に`.active`を消して頂けばOKです。 `:not()`の他にも、1つ目の要素だけを対象とする`:first`や、 逆に最後だけを対象にする`:last`など、便利な指示は他にも沢山あります。 こういったものも駆使しつつ組んでいくと、より見通しの良いコードになると思いますよ。 編集機能付きのテーブル、便利だと思います。がんばってください!