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

每一分钟，我都会加载此页面的一部分，＃user-card-second-remaining就在这个加载的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时，倒计时事件就会消失。

我认为，我应该刷新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/

倒计时通过.load jquery方法加载其父div后消失

2 个答案: