JQueryload(）函数之后，JavaScript的其余部分停止工作

After JQuery load() function, rest of JavaScript stops working

本文关键字：余部 停止工作 JavaScript 函数 之后 JQueryload      更新时间：2023-09-26

我有一个页面，里面有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);

当您在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中新添加的元素。

相关文章：