質問: 5) { $('#memos' + num).css('display', 'block'); } else { $('#memos' + num).css('display', 'none'); } }); }); ``` ``` - 参加 お名前: ディッシュタイプ: 選択してください 和食 フレンチ イタリアン 中華 その他 オプショナルディッシュなど: - 参加 お名前: ディッシュタイプ: 選択してください 和食 フレンチ イタリアン 中華 その他 オプショナルディッシュなど: + 入力内容の確認 ```
回答: 追加されたコードにはonchangeイベントは適用されていません。 DOMに対するJavascriptの操作はonChangeなどのイベントセットの記述を実行した瞬間にhtml上に存在するDOMに対して適応されます。 なので、javascript実行前にあるフォームに関してはonchangeイベントが設定されていますが、追加されたものに対してはonchangeイベントが設定されていないので、思い通りに動かないという事が起きます。 つまり、cloneして要素をInsertした後にもう一度onchangeイベントをセットしてあげると正しく動きます! ``` $original .clone() .hide() ... //テキストとテキストエリアの中身をクリアにする if ($type == 'text') { $(obj).val(''); }else if($type == 'textarea'){ $(obj).val(''); } }); // cloneした後にイベントを再設定すると動く $('select').change(function() { // イベントを追加 }) ``` しかし、それより一般的?なのは、皆様がおっしゃっているとおり、イベントをdocument自体に付与するパターンだと思います。 ``` $(document).on('change', 'select', function(){ // documentにeventが設定されているので問題なく動く }); ``` また、iphoneだと上の用にdocumentやbodyに付与するとイベントが動かないことがあったきがするので、body配下に一つdiv#rootみたいなものをいれて以下のようにするといいかもしれません。 ``` $('#root').on('change', 'select', function(){ // #rootに入れる }); ``` 何にせよ大事なことは、`.change`や`.on('change', function(){})`などは`~したら~してね`という動作をDOMに対して`設定する、セットする`という理解を持つことだと思います! それを持っていると、後から追加された要素にはイベントがセットされていないので、現在のバグが出来ていると理解できるかと思います! 長々すいません!