.ajaxStartと.ajaxStopは機能しません。

Question

ajaxStartとajaxStopを使用して、Ajaxリクエストの前後に表示して非表示にしたいローディングGIFがあります。何も機能しません：

HTML：

<div id="loading" style="display: none"><img src="loading.gif></div> 

JS：

$("#searchForm").submit(function(event) 
{ 

    $.ajaxStart(function() { 
    $("#loading").show(); 
    }); 
    $.ajaxStop(function() { 
    $("#loading").hide(); 
    }); 

    $.ajax({ 
     type: 'POST', 
     url: 'models/fetchUsers.php',  //the script to call to get data 
     data: $("#searchForm").serialize(), //add the data to the form 
     dataType: 'json',     //data format 
     success: function(data)    //on recieve of reply 
     { 

      $.each($(data), function(key, value) { 
       $('#itemContainer').append(value.user_id); 
      }); 
     }, 
     error: function() 
     { 
      $('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>'); 
     } 
    }); 

Answer 1

提出防ぐことができますあなたの投稿機能、でevent.preventDefault();を追加

<div id="loading" style="display: none"><img src="loading.gif"></div> 

問題はは（ "loading.gif"）も、あなたのHTMLでありajaxStartとajaxStop

$(document).ajaxStart(function() { 
     $("#loading").show(); 
}); 
$(document).ajaxStop(function() { 
     $("#loading").hide(); 
}); 

をお試しくださいボタンを押してフォームを送信します。

またはその他の方法は、ajaxのグローバル関数を呼び出すことなく、関数内のものだけを行うことです。

$("#searchForm").submit(function(event) 
{ 
    event.preventDefault(); 
    $("#loading").show(); 
    $.ajax({ 
     type: 'POST', 
     url: 'models/fetchUsers.php',  //the script to call to get data 
     data: $("#searchForm").serialize(), //add the data to the form 
     dataType: 'json',     //data format 
     success: function(data)    //on recieve of reply 
     { 

      $.each($(data), function(key, value) { 
       $('#itemContainer').append(value.user_id); 
      }); 
     }, 
     complete: function(){ 
      $('#loading').hide(); 
     }, 
     error: function() 
     { 
      $('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>'); 
     } 
    }); 
} 

Answer 2

$(document).ajaxStart(function() { 
    $("#gif-image-id").show(); 

}).ajaxStop(function(){ 
    $("#gif-image-id").hide(); 
}); 

別のイベント（イベントを提出外）、としてこれを入れて、いままでにセレクタを変更しますイメージIDは実際には