jQuery:.load()でのファイル読み込みが完了したときにイベントを発生させる
2024.08.27
jQuery の .load() を使って外部ファイルを読み込むとき、読み込み完了した時点で独自のイベントを発生させる方法です。
.load() が書かれているスコープの外でも読み込み完了を受け取ることができるので、読み込みを待ってから処理を行いたいときなどに便利です。

●ファイル読み込みのスクリプト

$(function(){
  $(".hoge").load("xxxxxx.html", function(){
    $("body").trigger("fileLoaded"); // イベント名は自由に設定できます
  });
});

●イベントを受け取って実行するスクリプト

$("body").on("fileLoaded", function() {

  // 読み込み完了時の処理

});

$("body")に対して "fileLoaded" というイベントを発生させています。
汎用的に使えるよう $("body") にしていますが、そのぶん被りづらいイベント名にするのが良いと思います。



月別アーカイブ