倒計時消失

Question

我具有被激活頁面加載後倒計時：

$(document).ready(function() { 
     var rem_hour = $("#user-card-second-remaining").attr("rem_hour"); 
     var rem_min = $("#user-card-second-remaining").attr("rem_min"); 
     var rem_sec = $("#user-card-second-remaining").attr("rem_sec"); 
     var currentDate = new Date(); 
     var targetDate = new Date(currentDate.getTime() + rem_hour * 60 * 60000 + rem_min*60000 + rem_sec * 1000); 

     $("#user-card-second-remaining").countdown(targetDate, function(event) { 
      $(this).html(event.strftime('%H:%M:%S')); 
     }); 
    }); 

每一分鐘，我部分地加載該頁面的一個div和＃用戶卡秒剩餘在這個加載的div內。

function fn60sec() { 
    // runs every 60 sec and runs on init. 
    var pathname = window.location.pathname; 

    var card = pathname + " #user-card"; 
    $("#user-card-wrapper").load(card); 
} 

問題是，當我加載新的＃user-card-second-remaining div時，countdown事件消失。

看來，我認爲我應該刷新dom（而不是頁面），這樣.countdown方法可以綁定到新鮮的＃user-card-second-remaining div中。

我該怎麼做？

Answer 1

更新DOM時，附加到DOM元素的所有jquery元素都被刪除。 實際上，具有jquery styff的DOM元素被刪除，並被替換爲另一個事件，全新的，沒有jQuery的東西。

你需要做的是在你更新DOM之後重新添加jQuery的東西，正如你所建議的那樣。

function fn60sec() { 
    // runs every 60 sec and runs on init. 
    var pathname = window.location.pathname; 

    var card = pathname + " #user-card"; 
    $("#user-card-wrapper").load(card, function() { 

    var rem_hour = $("#user-card-second-remaining").attr("rem_hour"); 
    var rem_min = $("#user-card-second-remaining").attr("rem_min"); 
    var rem_sec = $("#user-card-second-remaining").attr("rem_sec"); 
    var currentDate = new Date(); 
    var targetDate = new Date(currentDate.getTime() + rem_hour * 60 * 60000 + rem_min*60000 + rem_sec * 1000); 

    $("#user-card-second-remaining").countdown(targetDate, function(event) { 
     $(this).html(event.strftime('%H:%M:%S')); 
    }); 
    }); 
}); 

應該這樣做。

Answer 2

什麼庫/插件（從.countdown？你需要看看他們的文檔委派事件超載，或使用事件名稱的替代，所以你可以使用jQuery .on('eventname',

通常在這種情況下，你使用模式

$('#staticSelector').on('countdown', '#user-card-second-remaining', function() ...

，這偵聽#staticSelector事件從'#user-card-second-remaining'冒泡了。所以#staticSelector需求是一直存在的元素，但'#user-card-second-remaining'能根據需要在正在刷新的div內刷新。

這裏直接和委託的事件的部分說明了這一點： http://api.jquery.com/on/