I am calling loadAjax(); on a onClick event, but after I do the first one, it works, then after that, div.loading-ajax doesn't show anymore, div.loading-ajax is permanently hidden.. Anyone know why its permanently hidden after the first time it's done? Here is the code:
function loadAjax() {
$("#dialog1").fadeIn();
$("#loading-ajax").show();
$("#loading-ajax").css("position","static");
$("#dialog_text1").load("theurl", function() {
$("#loading-ajax").hide(); }
);}
HTML:
<div id="dialog1">
<div id="dialogtext1">
<div id="loading-ajax" class="loading-visible">
<p><img src="/images/loading.gif" /></p>
</div>
开发者_运维技巧 </div>
</div>
The CSS:
.loading-visible { display: block; position: fixed; }
Your loading-ajax div is inside #dialogtext1 - the contents of "theurl" are going to overwrite it, removing it from the DOM. Move it outside #dialogtext1 and it should work fine.
var loading_img = $('<div id="loading-ajax" class="loading-visible"></div>');
loading_img.append('<p><img src="/images/loading.gif" /></p>');
$("#dialog1").fadeIn().children('#dialogtext1').append(loading_img);
$("#dialog_text1").load("theurl", function() {
loading_img.remove;
}
精彩评论