0

AJAX 経由でデータを要求し、次のようにページに追加します。

$('#post-images').append('<div class="image-holder"><img src="' + resp.images[i].imageUrl + '" /><br /><input type="checkbox" value="' + i + '" /></div>');

クリック イベントをリッスンするイベント リスナーを設定しました。

$('.image-holder').on('click', function() {
    alert("testing");
});

ただし、メソッドが起動されることはありません。

Chrome 開発者ツールを使用すると、正しい HTML がページに挿入され、.image-holderdiv がクリックされていることがわかります (1x1 の寸法などはありません)。

4

1 に答える 1

0

このコード:

$('.image-holder').on('click', function() {
    alert("testing");
});

そのコードの実行時に存在するオブジェクトにのみイベント ハンドラーをバインドします。後でオブジェクトがページに追加された場合、オブジェクトにはイベント ハンドラーがありません。

.on()代わりに、次のような委任形式を使用できます。

$("#post-images").on('click', '.image-holder', function() {
    alert("testing");
});

#post-imagesこれにより、セレクターに一致する子オブジェクトからのバブル アップ クリックをキャッチする単一のイベント ハンドラーがバインドされる.image-holderため、動的に追加されたオブジェクトで機能します。

于 2012-08-22T23:07:07.700 に答える