After .hide() it doesn't .show() again

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;  
    }