jQuery完成不起作用

Question

I'm using jQuery to populate a DIV with JSON data loaded via AJAX. Everything is working well except for the very end of the process.

I have 3 issues:

First, it doesn't appear the AJAX complete function is firing. I'm not seeing my test output in the console log (and no errors, either). I've also tried ajaxComplete handler with zero success.

Secondly, my AJAX spinner image ("rets_loader") is being hidden before the content is populated instead of waiting until after. I want to keep displaying it until all the HTML is visible.

Third, I need a counter that will let me compare the number of JSON nodes returned and take some action. I've tried html.length, but it's always 0 (zero).

Here is my code which I simplified to make things clearer:

$( document ).ready(function() {    
    quick_search();
});

function quick_search(){
    $("#rets_loader").css("display","block");
    $("#ourHolder").css("display","none");
    var url="http://www.whatever.com/json.php";
    $("#ourHolder").html("");
    $.ajax({
        type: "POST",
        url: url,
        cache : false,
        dataType:"json",
        error : function() {
            alert("Sorry, we experienced an error. Please try again.");
        },
        complete: function() {
            console.log("Triggered Ajax complete." );    
        },
        success: function (html) {
            counter=html.length;
            $.each(html, function(i,item) { 
                read+='<a href="#">'+item.Address+'</a>';
                $("#ourHolder").html(read);
            });
            $("#rets_loader").css("display","none");
        }
    });

}

HTML

<div id="rets_loader"><img src="ajax-loader_RETS.gif"></div>
<div id="ourHolder"></div>