Ajax прелоадер работает только один раз

Question

У меня есть этот скрипт:

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

$(document).ready(function() { 
$('.button').click(function() { 
$("#contentDiv").load("content.php"); 
}); 

$('.button2').click(function() { 
$("#contentDiv").load("content2.php"); 
}); 
}); 

И этот HTML:

<div id="contentDiv"> 
<div id="loading"></div> 

</div> 

Я хочу, чтобы показать загрузку .gif перед каждой новой нагрузкой, но теперь он работает только в первый раз загружена вся страница. Поэтому, когда я нажимаю кнопку «первый раз», «загрузка» показывает, загружается «контент» и «загружается». Когда я, чем нажимаю кнопку «2», загружается «content2», но «загрузка» не отображается. Я пытаюсь вынуть «загрузку» div из «contentDiv», но «загрузка» никогда не скрывается.

Answer 1

Я сделал это работает так:

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

HTML:

<div id="contentDiv"></div> 
<div class="loading"></div> 

Я должен сделали класс нагрузки сНа, потому что ID не работает.

Answer 2

написать

<div id="loading" style="display:none"></div> 

над

<div id="contentDiv"> 

Answer 3

Вы заменяющее содержание #contentDiv, который содержит #loading DIV, поэтому он больше не может существовать после вызова .load() если сОн ISN» t также присутствует в content.php или content2.php. Может показаться, что ваш код работает полностью в первый раз, но вместо того, чтобы просто скрывать #loading, вы фактически удаляете его полностью.

Если это не проблема, возможно, что вызовы AJAX завершатся достаточно быстро, чтобы этот элемент был показан, а затем снова скрыт, достаточно быстро, чтобы вы не могли его увидеть.

Answer 4

ID предназначен для создания уникального экземпляра на вашей странице. С другой стороны, Класс можно повторно использовать несколько раз. Так на самом деле одна следующее изменение должно работать:

<div class="loading"></div>