Twitter Bootsrap: Popover và Tự động làm mới

Question

Tôi đang sử dụng Twitter Boostrap với thiết kế lại trang web và tôi cần một số trợ giúp về jQuery. Tôi đang sử dụng add-on 'Popover' được đóng gói với bootstrap, và tôi có nó trong một thẻ #div (#onlinedata để cụ thể), và tôi đang sử dụng jquery để tải lại div mỗi 10 giây. Điều này hoạt động tốt, tuy nhiên, nếu bạn xảy ra để được lơ lửng trên liên kết kích hoạt cửa sổ bật lên khi div làm mới, cửa sổ bật lên bị mắc kẹt.

Tôi đang sử dụng mã này cho làm mới:

setInterval(function(){ 
     $("#onlinedata").load("http://website.com #onlinedata"); 
}, 10000); 

Và nếu cần thiết, các mã kích hoạt popover:

$(function() { 
     $('a[rel=popover]').popover({ 
      placement:'right', 
      title:'Title', 
      content: $('#div-that-contains-data').html() 
     }); 
}); 

Có cách nào để tránh những popover khỏi bị mắc kẹt mở khi div tải lại?

Bất kỳ trợ giúp nào được đánh giá cao.

---

Associated HTML

Các $id là một cụ quan trọng đối với mỗi popover vì tôi có nhiều popovers.

Phần popover được ẩn cho đến khi popover_controller đang bay lượn:

<div id="controller_popup_$id" style="display:none;"> 
    <div style="font-size:11px"> 
     //data_fetched_from_database 
    </div> 
</div> 

Các liên kết kích hoạt popover

<li><a href="#" rel="popover_controller_$id">Link Title</a></li> 

Và cuối cùng, javascript hiện tại tôi đang sử dụng (nó được looped thông qua các bản ghi cơ sở dữ liệu để mỗi bản ghi nhận được javascript sau):

$(function() { 
    $('a[rel=popover_controller_$id]').popover({ 
      placement:'right', 
      title:'Title (this is fetched from the database for each popover)', 
      content: $('#controller_popup_$id).html() 
    }); 
}); 
$(document).ready(function() { 
    // refreshing code 
    setInterval(function() { 
     $('#controller_popup_$id').hide(); // close any open popovers 
     // fetch new html 
     $('#onlinedata').load('http://website-link.com #onlinedata', function() { 
      // after load, set up new popovers 
      $('a[rel=popover_controller_$id]').popover({ 
       placement:'right', 
       title:'Title (this is fetched from the database for each popover)', 
       content: $('#controller_popup_$id').html() 
      }); 
     }); 
    }, 10000); // 10 second wait 
}); 

---

** New Mã Witch Semi-Works **

Tôi đang sử dụng đoạn mã sau đó bán các tác phẩm. Vấn đề duy nhất tôi gặp phải là sau khi tải lại #onlinedata div, nó sẽ nhân các liên kết popover.

$(document).ready(function() { 
     $('a[rel=popover_controller_$id]').popover({ 
      placement:'right', 
      title:'Title', 
      content: $('#controller_popup_$id').html() 
     }); 
     // refreshing code 
     setInterval(function() { 
      // fetch new html 
      $('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() { 

       $('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers 
       // after load, set up new popovers 
       $('a[rel=popover_controller_$id]').popover({ 
        placement:'right', 
        title:'Title', 
        content: $('#controller_popup_$id').html() 
       }); 

      }); 
     }, 10000); // 10 second wait 
}); 

---

Answer 1

Giống như this answer, tôi nghĩ rằng bạn sẽ cần phải áp dụng lại các plugin để các yếu tố DOM mới đã được load -ed. Điều này có nghĩa là thêm một bản sao mã popover hiệu quả sau cuộc gọi load. Nếu popovers cũ đang treo xung quanh, bạn có thể phải ẩn chúng. Điều này cho phép chúng tôi:

$(document).ready(function() { 
    // refreshing code 
    setInterval(function() { 
     $('a[rel=popover]').popover('destroy'); // remove old popovers 
     // fetch new html 
     $('#onlinedata').load('/onlinedata.html #onlinedata', function() { 
      // after load, set up new popovers 
      $('a[rel=popover]').popover({ 
       placement:'right', 
       content: $('#div-that-contains-data').html() 
      }); 
     }); 
    }, 10000); // 10 second wait 
});