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

我有一个倒计时，该倒计时在页面加载后激活：

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

问题是，当我加载新的#用户卡剩余的第二个div时，倒计时事件消失

我认为，我应该刷新dom（而不是页面），这样就可以将.countdown方法绑定到fresh#user card剩余的第二个div中

---

如何才能做到这一点？

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

---

应该做到这一点。

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

---

应该做到这一点。

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

---

应该做到这一点。

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

---

应该做到这一点。

什么是库/插件。倒计时（从？您需要查看他们的文档，了解委派的事件重载，或者使用事件名称的替代方法，以便可以使用jquery

。on（'eventname'，

通常在这种情况下，您使用一种模式

$（'staticSelector'）。在（'countdown'，'user card second resisting'，function（）…

这会在

#staticSelector

上侦听从

'用户卡第二剩余'

冒出的事件。因此

#staticSelector

需要始终存在的元素，但是

'用户卡第二剩余'

可以根据需要在正在刷新的div中刷新

此处有关直接和委托事件的部分解释了这一点：

---

什么是库/插件。倒计时（从？您需要查看他们的文档，了解委派的事件重载，或者使用事件名称的替代方法，以便可以在（'eventname'）上使用jquery

。

通常在这种情况下，您使用一种模式

$（'staticSelector'）。在（'countdown'，'user card second resisting'，function（）…

这会在

#staticSelector

上侦听从

'用户卡第二剩余'

冒出的事件。因此

#staticSelector

需要始终存在的元素，但是

'用户卡第二剩余'

可以根据需要在正在刷新的div中刷新

此处有关直接和委托事件的部分解释了这一点：

---

什么是库/插件。倒计时（从？您需要查看他们的文档，了解委派的事件重载，或者使用事件名称的替代方法，以便可以在（'eventname'）上使用jquery

。

通常在这种情况下，您使用一种模式

$（'staticSelector'）。在（'countdown'，'user card second resisting'，function（）…

这会在

#staticSelector

上侦听从

'用户卡第二剩余'

冒出的事件。因此

#staticSelector

需要始终存在的元素，但是

'用户卡第二剩余'

可以根据需要在正在刷新的div中刷新

此处有关直接和委托事件的部分解释了这一点：

---

什么是库/插件。倒计时（从？您需要查看他们的文档，了解委派的事件重载，或者使用事件名称的替代方法，以便可以在（'eventname'）上使用jquery

。

通常在这种情况下，您使用一种模式

$（'staticSelector'）。在（'countdown'，'user card second resisting'，function（）…

这会在

#staticSelector

上侦听从

'用户卡第二剩余'

冒出的事件。因此

#staticSelector

需要始终存在的元素，但是

'用户卡第二剩余'

可以根据需要在正在刷新的div中刷新

此处有关直接和委托事件的部分解释了这一点：

---

我不认为倒数是一个事件。这是“最终倒数”。@DontVoteMeDown他将其称为一个事件，因此听起来像是删除/读取元素上的委托事件问题：“当我加载新的#用户卡剩余的第二个div时，倒数事件消失。”@DontVoteMeDown看到这一点，它是一个事件，因此函数处理程序有一个事件arg：我不认为

倒计时

是一个事件。它是“最终倒计时”。@DontVoteMeDown他将其称为一个事件，因此听起来像是删除/读取元素上的委托事件问题：“当我加载新的#用户卡剩余的第二个div时，倒计时事件消失。”@DontVoteMeDown看到这一点，这是一个事件，因此函数处理程序有一个事件参数：我不认为倒计时是一个事件。它是“最终倒计时”“@DontVoteMeDown Ah他将其称为一个事件，因此听起来像是删除/读取元素上的委托事件问题：“当我加载新的#用户卡第二个rema时。”