動作の流れ まず今回実現したい動作について説明します。 HTMLのフォームに入力してEnterキーを押す 入力内容をデータベースに挿入 入力内容をHTML要素として挿入 フォームの内容を入力したときのイベント 1のフォームに入力してEnterキーを押したときのイベント処理を考えていきます。 onメソッド セレクタ.on('イベント',関数);とすると、 セレクタで指定したHTML要素に第1引数のイベントが発生したときに、第2引数の関数が実行されます。 セレクタ.イベント(関数);で、 clickイベントなどはonとだいたい同じように使うことができます。 しかし、このようなイベント名のメソッドは、onメソッドと違って、jQueryなどで動的に作成したHTMLタグに対しては動作してくれません。 今回はフォームの内容をリスト上で動的に追加するので、onメソッドで統一しておきます。 changeと
![Ajax処理とMySQLを使って、ページを更新せずにデータべ―スの読み書き - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8ca4bbf715b68bc228ab6c5c0761cb96923350e6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9QWpheCVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBOE15U1FMJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgwJTgxJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgyJTkyJUU2JTlCJUI0JUU2JTk2JUIwJUUzJTgxJTlCJUUzJTgxJTlBJUUzJTgxJUFCJUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUUzJTgxJUI5JUUyJTgwJTk1JUUzJTgyJUI5JUUzJTgxJUFFJUU4JUFBJUFEJUUzJTgxJUJGJUU2JTlCJUI4JUUzJTgxJThEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNGIxNGI0MmU1NzdiMGJiOWM0MGQ2ZTI0YmRiOGUyOA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXVrYWtvX25pc2hpbXVyYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MmVmNDk4ZTRlMDhlZTQ0MjIyYTY0OWNiODZkOWY5MjY%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1ef8eacb27b924acad58897fdd76d591)