jQuery addセレクターのイベントをまだページに追加していない

私は<div>タグを持っています。これはユーザー変数に応じてページに追加されます（jquery append（）を使用してページに追加しています））jQuery addセレクターのイベントをまだページに追加していない

<div id="message"></div>

私はこのdiv要素のクリックイベントを持っていると思いますが、私はdiv要素をページに追加される前に、私はイベントをリッスンしていますので、私は問題を抱えていますね。

$(document).ready(function(){ 
    $('#message').click(function() { console.log('clicked'); // no console message? }; 
});

は伝統的に、delegate()またはlive()は、これを達成するために使用されなければなりませんでした。 jQueryの1.7以来、しかし、on()が好ましい：

$(document).on("click", "#message", function() { 
    console.log("clicked"); 
});

マークアップは、あなたの#message要素の非動的祖先が含まれている場合はさておき、それはパフォーマンス上の理由から、代わりにその要素にon()を適用すると良いでしょうとして：

$("#non-dynamic-ancestor-of-message").on("click", "#message", function() { 
    console.log("clicked"); 
});

2012-01-25 15:42:47

あなたは、イベント処理を委任するか、それがDOMに追加される前に、要素にイベントハンドラを追加することができ、次のいずれか

$(document).on('click', '#message', function() {...});

はjQueryの1.7の新機能で、この場合には .delegate()を使用するのと同じであることを $('body').append($message);

注：あなたがDOMに$messageを追加するたび

var $message = $('<div id="message" />').click(function() { console.log('clicked'); });

は、それから、clickイベントハンドラ付属していますただし、.delegate()の引数の順序は少し異なります。 .on()ため

2012-01-25 15:46:01 Jasper

答えて