在 JQuery load() 函数之后，其余的 JavaScript 停止工作

Question

我有一个带有 JavaScript 倒计时和 Bootstrap 工具提示 JavaScript 的页面。它们工作得很好，直到我使用 jQuery 的 load(); 函数重新加载页面。

在页面加载几秒钟后触发load(); 函数后，其他JavaScript 停止工作。

查看我的页面：http://areafordemos.freeoda.com/reload.html

我不明白为什么简单刷新会导致这种情况，以及如何解决这个问题？我试图将 JavaScript 代码放到其他地方，但没有帮助。

这是我的 Javascript 代码：

//JavaScript code for load() after few seconds.
setTimeout(function(){

    $().ready(function() {
    $(".reloadthis").load("reload.html .reloadthis");
    });


}, 5000);

//JavaScript code for tooltip.
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

//JavaScript code for countdown
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0) {
      document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
      return true;
    }

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2016-01-01T12:00:00+02:00';
console.log(deadline);

initializeClock('clockdiv', deadline);

Answer 1

当您将事件绑定到 javascript 中的元素时，处理程序将存在于 元素本身，而不是保留对其类的引用，因此当您在页面中重新加载新内容时，JS 赢了不再被他们束缚。

您可以（至少）做两件事来解决您的问题。

其中之一是通过重做函数调用来重新运行您的 JS。

例如每当您执行 $.load 时，您都可以添加一个回调，该回调应该在 完成获取页面内容之后运行。

例如：

$('.reloadthis').load('reload.html .reloadthis', function(resp, status, xhr) {
    call_functions_again(); // psuedo, you'd want to re-call your functions here to make them work with ajax loaded content
});

您也可以尝试查看事件委托，但这有不同的用途，例如通过侦听父级并让事件冒泡给子级，自动将事件绑定到 DOM 中新添加的元素。