2

通常、一見簡単なことの解決には数日かかるため、誰かが私に解決策を教えてくれるかもしれませんが、2日後に次の問題をあきらめました。

HTMLでは、フォームに、ajax呼び出しを介してデータのロードをトリガーするボタンがあります:

<button type="" class="btn" onclick="getData(); return false;">Show Data</button>

JavaScriptで：

$(document).ajaxStart(function() {
    $("#qloader").show();
}).ajaxStop(function() {
    $("#qloader").hide('slow');
});​

そして、id qloader の html div では、100% の幅と高さで定義され、スピナーは背景として中央に配置され、z-index は他よりも上に配置されます。

<div id="qloader" class="myLoader" >&nbsp;</div>

これで、ページが読み込まれると、初期データを取得するために ajax 呼び出しが実行され、qloader div が表示され、アニメーション化されたスピナーが表示されます。ajax 呼び出しが終了すると、qloader は ajaxStop によって非表示になります。

次に、ボタン (データを表示) をクリックして別の ajax 呼び出しを開始すると、ajaxStart がトリガーされますが、qloader は表示されず、ajaxStop がトリガーされるまで待機し、瞬く間に qloader が表示されて非表示になります。

ajaxStart が実行されていないのではないかと疑ったので、$("#qloader").show() の前にアラートを配置すると、アラートが表示され、その後 qloader が表示されますが、スピナーのアニメーションは中断されます - 回転せず、ajaxStop の後それは隠されます。

ajaxStart トリガーにアラートがない場合、後続の ajax 呼び出しでは、ajaxStop がトリガーされる直前まで div が表示されません。

最初の ajax 呼び出しでは正常に機能しますが、フォーム ボタンをクリックしてトリガーされる後続の ajax 呼び出しでは機能しません。

この設定の何が問題なのですか？

4

3 に答える 3

-1

ボタン クリック イベント ハンドラが正しくありません。return falseデフォルトの動作を妨げることはありません。これは単なる jQuery のものです。だから私はそうするでしょう。

$('.btn').on( "click" , function( event ){
   getData();
   return false;
});

これは実用的な例です。http://jsfiddle.net/FuFHe/

于 2012-08-28T15:36:45.790 に答える