jquery - div の問題に挿入された Ajax コンテンツ

Question

ajax を使用してコンテンツを取得するときに少し問題があります。問題は、成功イベントがトリガーされると、読み込まれたコンテンツを div に配置し、1 つの関数を呼び出すことです。

$('.content').html(data);
$('.image').resize(function(e) { more code.... });

問題は、2 行目が実行された時点で、コンテンツがまだ準備されていないため、効果がないということです。

この状況で何ができますか？

ありがとう。

Answer 1

2 行目をコールバック関数に入れ、.load を使用して最初の部分を完了します。

$('.content').load(<ajax url here>, function () {
  $('.image').resize(function (e) {
    // do whatever else you need to do here
  });
});

Answer 2

(AJAX ロードのため) まだ DOM にないものにイベントをアタッチしていることが問題である場合は、委任されたイベント ハンドラーを使用できます。

.imageこれは、すべての要素が要素内にあることを前提としています.content。できるよ：

$('.content').on('resize', '.image', function(e) { ... });

jQuery .on()イベント登録構文を参照してください。これにより、要素が動的に追加された場合でも (つまり、AJAX を介して) 、要素内のすべての要素のresizeイベントがリッスンされます。.image.content