Twitter Bootstrap Popovers не работает для динамически генерируемого контента
Новое для публикации в stackoverflow здесь, так что извиняюсь заранее, если я что-то испортил.
Я использую Twitter Bootstrap popovers. Мои popovers, похоже, работают для элементов, которые я вручную вписываю в свой HTML-документ, но НЕ являются элементами, которые я динамически генерирую с помощью Javascript/Ajax.
Например, popover, похоже, работает, если я вручную добавлю это непосредственно в свой HTML-документ:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
Но мне действительно нужно, чтобы мои динамически сгенерированные элементы имели popovers. Я использую XMLHttpRequest, чтобы отправить запрос в файл PHP, а затем захватить responseText и отобразить его. Когда я добавлю эту строку кода в свой вышеупомянутый файл PHP:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... наверняка, появляются слова "hover for popover", но сам popover не работает!
Это время от времени меня заводило, и было бы невероятно, если бы кто-то помог мне помочь! Я также добавил функцию JQuery, которую я использую, чтобы включить Popstash popovers ниже, для чего это стоит.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
Я провел тщательный поиск похожих проблем, и лучшее, что я мог найти, было эта ссылка. Но у этой ссылки, похоже, нет никаких решений. Спасибо заранее!
UPDATE:
Фиксированный! Большое спасибо всем, кто помог. Моя проблема заключалась в том, что функция вызывалась до того, как элементы были добавлены в объектную модель документа. Есть несколько возможных исправлений - я просто протестировал решение, переключив функцию popover на END функции Ajax, и это сработало!
Ответы
Ответ 1
Вам нужно позвонить $("[rel=popover]").popover({placement:'left'});
ПОСЛЕ того, как элементы находятся в DOM.
UPDATE
Если вы используете jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
ИЛИ catch для запросов ajax для jQuery
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
Ответ 2
В функции успеха ajax вам нужно вызвать popover. Что-то вроде этого
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
Ответ 3
Эта функция будет работать правильно в селекторе, где вы должны указать местоположение на странице, где вам нужно искать "rel= popover", как я положил *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});