0

我在侧边栏上使用 Twitter Bootstrap 的 Popover 功能。每 30 秒获取侧边栏并重新加载内容。我正在起诉 XMLHttpRequest 通过获取一个名为 stats.php 的文件来重新加载侧边栏的内容。

以下代码是驻留在页面标题中的“刷新”代码。

function onIndexLoad()
{
    setInterval(onTimerCallback, 30000);
}

function onTimerCallback()
{
  var request = new XMLHttpRequest();
  request.onreadystatechange = function()
  {
      if (request.readyState == 4 && request.status == 200)
      {
          document.getElementById("stats").style.opacity = 0;
          setTimeout(function() {
              document.getElementById("stats").innerHTML = request.responseText;
                document.getElementById("stats").style.opacity = 100;
              }, 1000);
      }
  }
  request.open("GET", "stats.php", true);
  request.send();
}

上面的代码完美无缺，但是，在它重新加载#stats div 之后，弹出框不再做它应该做的——弹出。

弹出框代码位于 foreach() 循环中的 stats.php 中，因为我需要多个弹出框脚本，因为侧边栏上有多个弹出框。

这是我的弹出框代码：

$(document).ready(function() {
  $('a[rel=popover_$id]').popover({
        placement:'right',
        title:'$title',
        content: $('#popover_content_$id').html()
  });
});

$id和是动态的$title，因为它们是从 foreach() 循环中拉出的。

如何修复它，以便在 div 重新加载后，popover 函数将重新初始化？

$("a[rel=popover_controller_$cid]").on({
    mouseenter: function () {
        $('a[rel=popover_$id]').popover({
                placement:'right',
                title:'$title',
                content: $('#popover_content_$id').html()
        });
    }
});

我也试过：

$("a[rel=popover_controller_$cid]").on("mouseover", function () {
    $('a[rel=popover_$id]').popover({
            placement:'right',
            title:'$title',
            content: $('#popover_content_$id').html()
    });
});
4

1 回答 1

1

.live已贬值。使用.on委托

尝试这样的事情：

$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
        $('a[rel=popover_$id]').popover({
                placement:'right',
                title:'$title',
                content: $('#popover_content_$id').html()
        });

});

这将 mouseenter 事件从#statsto委托给，并且因为该事件是委托的，所以在替换内容a[rel=popover_controller_$cid]时它仍然会触发。#stats

小心 - 您将在每次鼠标悬停时继续初始化弹出框。那可能很糟糕。

当你在它的时候 - 你应该使用 jquery 的 ajax 而不是原生的 xhr。它更容易，更跨浏览器。

$.get('stats.php', function(d){
    $('#stats').html(d);
};

--

setInterval(function(){
    $.get('stats.php', function(data) {
        $('#stats').html(data);
    });
}, 30000);
于 2012-09-08T19:05:01.687 回答