element.html（）在DOM准备就绪时返回空

Question

I am working on a countdown timer, using http://keith-wood.name/countdown.html .

My code looks like this,

$('.clock').countdown({until:new Date(2012, 11, 31), format: 'odHMS', onTick:watchCountdown, tickInterval:5, layout:
    '<div id="timer">' +
        '<div id="timer_labels">'+
            '<div id="timer_months_label" class="timer_labels">Months</div>'+
            '<div id="timer_weeks_label" class="timer_labels">Days</div>'+
            '<div id="timer_days_label" class="timer_labels">Hours</div>'+
            '<div id="timer_minutes_label" class="timer_labels">Minutes</div>'+
        '</div>'+
        '<div id="timer_months" class="timer_numbers"><span class="divide"></span><span>{onn}</span></div>'+
        '<div id="timer_days" class="timer_numbers"><span class="divide"></span><span>{dnn}</span></div>'+
        '<div id="timer_hours" class="timer_numbers"><span class="divide"></span><span>{hnn}</span></div>'+
        '<div id="timer_minutes" class="timer_numbers"><span class="divide"></span><span>{mnn}</span></div>'+
    '</div>'
});

As you onTick I call a function that looks like this,

function watchCountdown(periods) { 
var $div = $("#monitor");
var html = $div.html();
var checking = setInterval(function() {
    var newhtml = $div.html();
    if (html !== newhtml) {
        myCallback($div);
    }
},100);
$('#monitor').html('<div id="timer_minutes" class="timer_numbers"><span class="divide"></span><span class="minutes">' + periods[5] + '</span></div>'); 

}

In the function above there is a check for html != newhtml however html is returning as an empty variable evening though there is HTML in the #monitor element. How can I make it realise there is content to check against?

Answer 1

You don't understand what is DOM ready, it fires only once, when the DOM is fully loaded and rendered from the server.

If you change the DOM with javascript, it has no effect on the DOM ready event.

$('#monitor').html('<div id="timer_minutes" class="timer_numbers"><span class="divide"></span><span class="minutes">' + periods[5] + '</span></div>');

The code above will not cause delay or trigger again the DOM ready event.