0

サイドバーでTwitterBootstrapのポップオーバー機能を使用しています。サイドバーがフェッチされ、30秒ごとにコンテンツがリロードされます。stats.phpというファイルをフェッチして、サイドバーのコンテンツをリロードするためにXMLHttpRequestを訴えています。

次のコードは、ページのヘッダーにある「更新」コードです。

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とは$titleforeach（）ループから取得されるため、動的です。

divがリロードされた後、ポップオーバー関数が再初期化されるようにするにはどうすればよいですか？

$("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イベントがから#statsに委任されます。a[rel=popover_controller_$cid]イベントが委任されているため、#statsコンテンツが置き換えられた場合でもイベントは発生します。

注意してください-マウスオーバーごとにポップオーバーを初期化し続けます。それは悪いかもしれません。

その間、ネイティブxhrの代わりにjqueryのajaxを使用する必要があります。そのより簡単でよりクロスブラウザ。

$.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 に答える