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

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，并且 #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 方法可以绑定(bind)到新的 #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'));
    });
  });
});

应该可以解决问题。