ajax load（）後の要素を操作する

StackOverflow https://stackoverflow.com/questions/3824118

  •  26-09-2019
  •  | 
  •  

質問

.load（）を使用してロードした後、いくつかの要素を操作しようとしています。すべてが正しくロードされていますが、ロードされた要素内の要素をターゲットにすることはできません。これは簡単なことのように思えますが、指を置くことができます。

要素の負荷後にコールバックを使用していますが、DOMはそれらの存在を認識していないようですか？

function load_page(){
    $('#page_name').load("/page-name/ .page", null, load_complete());
}

function load_complete() {
    $('#page_name .book_img').addClass('hello');
}

わかりました、これは私が今いるところです。私が追加しました...

$('#wrapper').ajaxComplete(function() {
    $('#page_name .book_img').addClass('hello');
}

機能します。 .autocompleteと.load（）関数でパッケージ化されたコールバックには違いがある必要があります。 Ajaxイベントが読み込み終了するたびに呼ばれているので、私はこれが本当に好きではありませんが、それは私をもう少し遠くまで連れて行きます。

誰かがもっと良いものを持っていますか？

編集

私も試しました...

$('#wrapper').ajaxComplete(function() {
    $('#page_name .book_img').addClass('hello');
}

関数を呼び出す前にすべてのAJAX呼び出しが完了するまで待つので、これはちょっといいです。たぶんこれがそれを行う方法ですが、それでも.load（）関数がこれを処理するように思われますか？

正しい解決策はありません

他のヒント

コールバック関数をロードメソッドに渡す代わりに実行するように見えます。

function load_page(){
    // $('#page_name').load("/page-name/ .page", null, load_complete());
    $('#page_name').load("/page-name/ .page", null, load_complete);
}

function load_complete() {
    $('#page_name .book_img').addClass('hello');
}

load_completeには返品値がないため、ロードメソッドに渡されていたのはnullです

HTMLがレンダリングに少し時間がかかる場合があります。新しいコンテンツにアクセスする前に、遅延を追加してみてください。

$('#page_name').load("/page-name/ .page", null, window.setTimeout(function(){load_complete()},50);

ロードされているアイテムにロードされたオブジェクトを操作するJavaScriptを含める必要があります。これは、すでにすべてのJavaScriptを実行しているためです。

編集

これを試して、非同期性をfalseに設定して、ロード後にコールバックを追加できるようにします。

$.ajax ({
  async: false,
  type: "GET",
  dataType: "html",
  url: "/page-name/ .page",
  complete: function(){load_complete()};
});

アップデート

ねえ、私が時々使用するこの速記の声明もあります。これらがあなたのスクリプトで機能していないことを驚かせます。

$.get($(this).attr('href'), function(response) { $('#content').html(response); });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top