0

ajaxリクエストを監視し、リクエストの開始/終了時にスピナー画像を表示/非表示にする次のjQueryコードがあります。

これは、ページの読み込み時にうまく機能します。ただし、ページの一部を新しい ajax リンクで更新すると、このコードはajax:before. unbind() を呼び出してからコードを再度呼び出すことなく、これに対する解決策があるかどうかは誰にもわかりませんか?

$("*[data-spinner]").on('ajax:before', function(e) {
    $('#' + $(e.target).data('spinner')).show();
});

$("*[data-spinner]").on('ajax:complete', function(e) {
    $('#' + $(e.target).data('spinner')).hide();
});
4

3 に答える 3

2

のように試しましたか

$("body").on("'ajax:before", "*[data-spinner]", function(){
 $('#' + $(e.target).data('spinner')).show();
});

$("body").on('ajax:complete', "*[data-spinner]", function(e) {
    $('#' + $(e.target).data('spinner')).hide();
});
于 2013-09-11T13:29:55.887 に答える
1 
$(document).on('ajax:before', '*[data-spinner]', function(e) {
    $('#' + $(e.target).data('spinner')).show();
});

これは、jQuery がその関数をページロード時に DOM にバインドするためです。まだそこにない「データスピナー」をバインドしようとすると、jQuery はそれを見つけられず、バインドしません。

ただし、ドキュメントにバインドすると検出され、'*[data-spinner]' が単なるフィルターであるため、2 番目のパラメーターとして渡されます。jQuery は、「ドキュメント」内の何かをクリックした場合にのみ監視するため、常に最新の状態になります。

于 2013-09-11T13:33:43.603 に答える
0

それは次のようなものでなければなりません

$(document).on("ajax:before", "*[data-spinner]", function(){
    //...
});

または、ドキュメントの代わりに親要素を使用できます。これは、より優れた/高速です。つまり

$('#parent_element').on("ajax:before", "*[data-spinner]", function(){
    //...
});

原型は

.on( events [, selector ] [, data ], handler(eventObject) )

詳細については、jQuery の Web サイトを参照してください。

于 2013-09-11T13:30:54.483 に答える