jqueryにて書き換えたinput要素に入力できないことについて

お力をお貸しください。

input要素にて入力した値を表へ追加していく機能を実装しております。

その中で、追加した表のセルをクリックするとinput要素に変更して編集機能を実装したいとやっているのですが、うまくいかず質問させていただきました。

エラー内容としましては、html()にてinput要素に変換までできたものの、入力ができないというものです。

参考までに該当箇所のソースを以下に記載させていただきます。

JQuery
1//編集処理
2    $(document).on('click','.list table td',function(){
3        $(this).html('<input type="text">');
4    });

input要素に変換後、入力ができるようにしたいです。
誤っている点や足りないものなどございましたら、ご教授いただけないでしょうか。

その他必要な情報などございましたら、いただければ幸いです。

お手数をおかけしますが、何卒宜しくお願い致します。

kei344

2016/05/15 02:56

「入力ができない」のは具体的にどのような状況か、また試したブラウザなどの情報も追記願えませんか？

行動規範の内容に同意します

回答2件

kei344さんもおっしゃっていますが、
今回の症状は「追加したinput」へ文字を入力しようとクリックする際に、
再度.on('click','.list table td',function(){});のイベントが発動している事が原因です。

oneを使って、発動を1回だけにするのも解決策のひとつですし、
何度も編集が必要なのであれば、適当なClassと:not()を組み合わせるのも良いと思います。

例えば以下のような感じです。

javascript
1$(document).on('click','.list table td:not(.active)',function(){
2	$(this).addClass('active');
3	$(this).html('<input type="text">');
4});

Inputタグを追加する際に、そのtd部分に.activeというクラスを追加しています。
そして、clickイベントとしてtd:not(.active)と指定することで、
.activeというクラスが付いていると、イベントの対象にならない様に指示しています。

あとは編集が終わって、input要素を削除する際に.activeを消して頂けばOKです。

:not()の他にも、1つ目の要素だけを対象とする:firstや、
逆に最後だけを対象にする:lastなど、便利な指示は他にも沢山あります。
こういったものも駆使しつつ組んでいくと、より見通しの良いコードになると思いますよ。

編集機能付きのテーブル、便利だと思います。がんばってください！

投稿2016/05/15 07:25

gzrita

総合スコア236

いくつか方法はありますが、.on() のかわりに .one() を使えば入力できるようになります。

入力できないのは、td のクリックでHTMLを input に書き換える動作が input のクリック時にも起こる（イベントバブリング）からです。
なので、一度だけのイベントを登録する .one() を使うことで解決できます。ただ、実装の仕方を調整する方法など（ td 以外をクリックするように変更するなど）もあるとは思います。

JavaScript
1$( document ).one( 'click', '.list table td', function() {
2    $( this ).html( '<input type="text">' );
3} );
4```**[動くサンプル：https://jsfiddle.net/gw7p0Lqk/](https://jsfiddle.net/gw7p0Lqk/)**
5
6【.one() | jQuery 1.9 日本語リファレンス | js STUDIO】
7[http://js.studio-kingdom.com/jquery/events/one](http://js.studio-kingdom.com/jquery/events/one)
8
9【.one() | jQuery API Documentation】
10[http://api.jquery.com/one/](http://api.jquery.com/one/)
11
12【DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita】
13[http://qiita.com/hosomichi/items/49500fea5fdf43f59c58](http://qiita.com/hosomichi/items/49500fea5fdf43f59c58)