追加した要素にすでにあるイベントの処理を再設定したい
解決済
回答 3
投稿
- 評価
- クリップ 1
- VIEW 8,049
現在HTML,Javascript(jQuery)を使ってアプリを作っています。
質問があるのですが、
結論から言うと、
追加した要素にすでにあるイベントの処理を再設定するにはどうしたらいいでしょうか?
状況としては、
$('#testBtn').on('click',function(){
console.log('このイベント処理を再設定したい');
});
あるいは
function testBtn(){
console.log('このイベント処理を再設定したい');
}
のようなイベントの処理がすでに存在し、
その後appendなどで要素を追加します。
それに対して上記のイベントをもう一度設定するにはどうしたらいいかということです。
いちいちappend後にもう一度同じ処理
$('#testBtn').on('click',function(){
console.log('このイベント処理を再設定したい');
});
を書くのも綺麗じゃないし、処理が長ければ、大変だし可読性が下がります。
これを簡単に上記のパターンのイベントを再設定する方法があれば知りたいです。
よろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
追加挿入した要素ノードにイベント定義
素直に実装するなら関数を無名関数式から関数宣言に変えます。
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 さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
えっと、
追加した要素にすでにあるイベントの処理を再設定する
というのは、誤解を招く表現かな、と思いました。「イベントハンドラの再設定」というと、すでに設定されているハンドラを別のものに差し替える、という意味に捉えられるかな、と。
で、$('testBtn')
にイベントハンドラを登録していますが、新たに追加する要素に同じ id を付けるのはおかしいので、クラス .awesome
の要素 ($('.awesome')
) にイベントハンドラを登録する例でよいでしょうか。
$.fn.awesome = function() {
$(this).on('click', function() {
console.log('AWESOME !!!');
return false;
});
return this;
};
$(function() {
$('#testBtn').awesome();
$('#appendBtn').on('click', function() {
// 新しい要素を $('#area') に追加する。ときに awesome をつける。
$('<button class="awsome">').val('something').awesome().appendTo($('#area'));
return false;
});
});
ちょっと未検証のコードですが、こんな感じではどうでしょうか。
(てか、.awesome
関係ないコードになってしまった)
追記:プラグインなし版
上のコードでは awesome
という jQurty プラグインを定義して使っている形になっています。プラグインを使わずに、次のように書いてもいいかとは思いますが。
$(function() {
function awesome($target) {
$target.on('click', function() {
console.log('AWESOME !!!');
return false;
});
return $target;
};
awesome($('#testBtn'));
$('#appendBtn').on('click', function() {
// 新しい要素を $('#area') に追加する。ときに awesome をつける。
awesome($('<button class="awsome">').val('something')).appendTo($('#area'));
return false;
});
});
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
親要素に対してクリックイベントを設定し、イベント内で判断するのはどうでしょうか?
<div id="main">
<b>hogehoge</b><br />
</div>
function add()
{
$("div").append("<b>Hello</b><br/>");
}
function clickEvent(event)
{
var target = $(event.target);
if(target.is("b"))
{
alert(target.html());
}
}
$("div").click(clickEvent);
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/04/23 12:57
素直に関数にしてしまうのが良策なのですね。
そのようなやり方でいきます。
ありがとうございました。