javascript - element.html() 在 DOM 就绪时返回空

Question

我正在开发一个倒计时器，使用 http://keith-wood.name/countdown.html 。

我的代码如下所示，

$('.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>'
});

当你 onTick 时，我调用一个如下所示的函数，

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>'); 

}

在上面的函数中，对 html != newhtml 进行了检查，但是 html 作为空变量 night 返回，尽管 #monitor 元素中有 HTML。我怎样才能让它意识到有内容需要检查？

Answer 1

你不明白什么是 DOM 就绪，它只在 DOM 完全加载并从服务器渲染时触发一次。

如果使用 javascript 更改 DOM，则不会影响 DOM 就绪事件。

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

上面的代码不会造成延迟，也不会再次触发 DOM 就绪事件。