web-dev-qa-db-ja.com

.load後の関数の呼び出し（Jquery）

.loadの後に呼び出す関数を取得するのが少し難しい：

$(function(){
    $('a.pageFetcher').click(function(){
        $('#main').load($(this).attr('rel'));
    });
});

ページは読み込まれますが、関数は起動しません。

$(function(){
    var $container = $('#container');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.box',
    });
});
$container.infinitescroll({
    navSelector  : '#page-nav',
    nextSelector : '#page-nav a',
    itemSelector : '.box',
    loading: {
        finishedMsg: 'Nothing else to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
    }
},
function( newElements ) {
    $.superbox.settings = {
        closeTxt: "Close this",
        loadTxt: "Loading your selection",
        nextTxt: "Next item",
        prevTxt: "Previous item"
    };
    $.superbox();
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true ); 
    });
}
);
});

.loadの後に2番目の関数が呼び出されるようにそれらを組み合わせようとしましたが（このサイトで検索を行い、与えられた回答/例を調べた後）、何も正しく機能していないようです。

提案？

jqueryfunctionload
12
Matt

.load()の終了後にコードを実行するには、コードを.load()の完了関数に配置する必要があります。ロード操作は非同期であるため、ロード関数はコンテンツのロードを開始し、すぐに戻り、JSの実行が続行されます（ロードが完了する前）。したがって、新しくロードされたコンテンツを操作しようとしても、まだそこにはありません。

コードが記述されたので、元のHTMLドキュメントの準備ができたときに両方が実行される2つのコードブロックがあります。最初のブロックは.load()操作を開始します。 2番目の操作は、.load()がすでに実行されていることを想定していますが、まだ完了していないため、.load()操作のコンテンツはまだ利用できません。

そのため、.load()は補完関数を引数として取ります。これは、ロードが完了したときに呼び出される関数です。詳細については、 関連するjQuery .load() doc を参照してください。完了関数を使用すると、コードは次のようになります。

$(function(){
    $('a.pageFetcher').click(function(){
        $('#main').load($(this).attr('rel'), function() {
            // put the code here that you want to run when the .load() 
            // has completed and the content is available
            // Or, you can call a function from here
        });
        // the .load() operation has not completed here yet
        // it has just been started
    });
});
29
jfriend00

bootstrapロードボタンを使用して、.load（）と.load（）の後に関数をトリガーすることもできます

HTML

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button>

JQUERY

 $("#refresh").click(function() {

    var $this = $(this);
    $this.button('loading');

    $("#container").load("/showemails.aspx?page=1 #container", function() {
         $("#refresh").button('reset');
      });

     return false;
  });
1
gladiesobmerga

最初の参照ポイントは常に jQuery API である必要があります。これは、 。load（） のAPIページで、load関数が取るパラメーターについて説明しています。

.load（handler（eventObject））

.load（[eventData]、handler（eventObject））

この場合、eventDataとして$(this).attr('rel')を渡すので、次のようにイベントハンドラーafterを追加します。

$('#main').load($(this).attr('rel'), onNewMainContent);

コードの2番目のブロックでは、サイトにさらにロードするときではなく、bodyがロードされるときに実行するようにjQueryに指示しています。具体的に実行する必要があるため、その関数の開始を次のように変更します。

function onNewMainContent {  // new
  var $container = $('#container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
  // ...
1
Tom McKenzie