質問: 現在HTML,Javascript(jQuery)を使ってアプリを作っています。 質問があるのですが、 結論から言うと、 **追加した要素にすでにあるイベントの処理を再設定するにはどうしたらいいでしょうか?** 状況としては、 ``` $('#testBtn').on('click',function(){ console.log('このイベント処理を再設定したい'); }); あるいは function testBtn(){ console.log('このイベント処理を再設定したい'); } ``` のようなイベントの処理がすでに存在し、 その後appendなどで要素を追加します。 それに対して**上記のイベントをもう一度設定するにはどうしたらいいか**ということです。 いちいちappend後にもう一度同じ処理 ``` $('#testBtn').on('click',function(){ console.log('このイベント処理を再設定したい'); }); ``` を書くのも綺麗じゃないし、処理が長ければ、大変だし可読性が下がります。 これを簡単に上記のパターンのイベントを再設定する方法があれば知りたいです。 よろしくお願い致します。
回答: ### 追加挿入した要素ノードにイベント定義 素直に実装するなら関数を無名関数式から関数宣言に変えます。 ``` function handleClick () { console.log('このイベント処理を再設定したい'); } jQuery('.hoge').on('click', handleClick); // #testBtn をDOMツリーに挿入する jQuery('#testBtn').on('click', handleClick); ``` ### 上位ノードでイベント定義 `click` はイベントバブリング可能なので上位ノードで監視する方法もあります。 http://uhyohyo.net/javascript/3_3.html ``` jQuery(document.body).on('click', '.hoge', function handleClick () { console.log('このイベント処理を再設定したい'); }); // #testBtn をDOMツリーに挿入する // ↓ // document.body ははじめから存在するので、改めてイベント定義する必要はない ``` ### 更新履歴 * 2016/04/23 12:17 上位ノード版コードの引数が間違っていたのを修正 Re: k499778 さん