jQueryのappendで追加した要素のclickイベントが動かない場合
//ボタンクリック時にアラート
$("#sampleBtn").click(function() {
alert("クリック!");
});
//クリック時にアラートを出すボタンをbodyに追加
$("#addBtn").click(function() {
$("body").append('<a id="sampleBtn">サンプルボタン</a>')
});
上記のコードではclickイベントが発生しない。
.bindや.clickは新たに追加されたDOMに影響を与えないからだ。
しかしon関数を使うことで容易に解決できた。
on関数は.bindや.live、.delegateの後継となる上位関数。
//ボタンクリック時にアラート
$(document).on("click","#sampleBtn", function() {
alert("クリック!");
});
//クリック時にアラートを出すボタンをbodyに追加
$("#addBtn").click(function() {
$("body").append('<a id="sampleBtn">サンプルボタン</a>')
});
これなら一々bindしなくても常にイベントが発生する。
.click()と.live()と.delegate()の違いは以下のページを参照。
http://d.hatena.ne.jp/y-kawaz/20111002/1317489435
最近のコメント