javascript - 在 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

当您将事件绑定(bind)到 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
});

您也可以尝试研究事件委托(delegate)，但这有不同的目的，例如通过监听父元素并让事件冒泡给子元素来自动将事件绑定(bind)到 DOM 中新添加的元素。