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。

e.g。每当你执行$.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中新添加的元素，并让事件冒泡到子级。

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

1 个答案: