質問: ### 各ボタンから追加した各テキストエリアをlocalStorageで保存・削除を実行したい ワードプレスでページ製作をしています。javaに関しては素人で検索した素材をよく利用しています。 今回、複数のテキストエリア生成ボタンを用意し、追加した要素&テキストエリアの内容を保存するために検索しヒットした情報を実行、微調整、繋ぎ合わせと素人ならではで試行錯誤しております。 **localStorageを利用して次のことを実現したいです。 (1)appendで追加した~をブラウザの更新時に消えないように保存する (2)appendで追加した各テキストエリアの内容を(各々or一括)保存する (3)appendで追加したを削除する (4)各テキストエリアで保存した内容を全てクリアにする 現状、追加は出来ても要素&テキストエリアの保存・削除ができません。** ただいま検証しているコードが下記になります。 ### 各ボタンでテキストエリアを追加するコード ``` button1 button2 button3
回答: ``` $(document).on('click', '#save1', function(){ window.localStorage.setItem('text1', $("#list .text1").val()); alert("データ1を保存しました。"); }); $(document).on('click', '#save2', function(){ window.localStorage.setItem('text2', $("#list .text2").val()); alert("データ2を保存しました。"); }); $(document).on('click', '#save3', function(){ window.localStorage.setItem('text3', $("#list .text3").val()); alert("データ3を保存しました。"); }); ``` これでいかがでしょうか? 変更部分は $("#save1").click(function(){ を $(document).on('click', '#save1', function(){ に置き換えております。 少し気になって調べてみましたら、興味深い記事がありました。 > > jQueryのappendメソッドなどで後から追加した要素にclickイベントを設定するとクリックをしているのに動かないことがあります。 > > そういうときは、onメソッドを使うと解決できる > > > clickイベント(jQuery)の罠 私もこの問題で引っかかりそうでしたので大変勉強になりました。 頑張って開発を続けてくださいね。