追加された要素にイベントを追加するタイミング - jQuery

jQueryでclickイベントを追加する場合、イベントを関連付ける要素のclassが『foo』とすると、以下のように記述します。

$(function(){
    $(".foo").click(function(){
        alert('Clicked!');
    });
});

しかし、Webページを表示後のイベントで追加した要素に対してはイベントが関連付けられません。
ですから上記の場合だとページが読み込まれたときに存在している要素にのみclickイベントが関連付けられるので、Webページを表示後に追加した要素のclassが『foo』だとしても、このままではclickイベントは起きません。

サンプルを作成しましたのでこちらで確認して見てください。

sample:jQuery - Test イベントを関連付ける



新しく追加された要素にイベントを関連付けるにはどうすれば良いか

『var elm = document.createElement("div");』

このように追加したい要素を生成したとします。
この『elm』に対してclickイベントを関連付けるコードをすぐ下に記述します。

例)
$(document.createElement("div"))
.bind("click",function(){
    alert('Clicked!');
})
.appendTo("#container");

すぐ下と言ってもjQueryの『append』などによる追加処理の前後どちらでも構いません。
要は要素が追加されるイベント内で行えば良いということになります。

0 Comments:

Sony Style(ソニースタイル)
デル株式会社

Recent Posts