Q&A
ボタンを押すとフォームが追加されていくもの対して、各フォームに設置した[削除]ボタンを押すと、追加したフォームを削除できるようにしたいです。
下記のコードについて、ページをめくったときにはじめからあるフォームには、$('td.del').click() の処理が適用されますが、追加したフォームについては、削除ボタンを押しても、処理が適用されません。これを回避するような書き方はありますでしょうか?
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(function() { $('button#add').click(function(){ var tr_form = '' + '<tr>' + '<td><input type="text" name="text_1[]"></td>' + '<td><input type="text" name="text_2[]"></td>' + '<td>[×]</td>' + '</tr>'; $(tr_form).appendTo($('table > tbody')); }); $('td.del').click(function(){ $(this).parent().replaceWith(); }); }); </script> <form action="data.php" method="post" enctype="multipart/form-data"> <table> <thead> <tr> <th>テキスト</th> <th>テキスト</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="text_1[]"></td> <td><input type="text" name="text_2[]"></td> <td class="del">[×]</td> </tr> </tbody> <tfoot> <tr> <td ><button id="add" type="button">追加</button></td> </tr> </tfoot> </table> <input type="submit" name="send" value="送信"> </form> </body> </html>
回答1件
0
ベストアンサー
javascript
1$('td.del').click(function(){ 2 $(this).parent().replaceWith(); 3});
この書き方だと、onloadイベントが起きた瞬間に存在していたtd.delに対してのみイベント登録されますので、あとから追加されたものでは動作しないのです。
あとから登録したものでも動作するようにするためには、上位タグ視点で、このように登録します。
javascript
1$('form').on('click','td.del',function(){ 2 $(this).parent().replaceWith(); 3});
それと、
javascript
1 '<td>[×]</td>'
この部分は class="del"指定がないようですが…。
投稿2017/07/22 00:47
総合スコア1441
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/22 01:20