Применить qtip(плагин jQuery) к вновь загруженным элементам на странице
Во-первых, это qtip, плагин jQuery: http://craigsworks.com/projects/qtip2/ По сути, он создает красивые подсказки.
Я использую qtip на странице результатов базы данных mysql, и qtips отлично работают, когда я впервые загружаю страницу. Тем не менее, на моей странице есть ссылки для сортировки, которые приводят к полному изменению информации внутри div (использует AJAX для добавления новой информации в div, выполняя новый запрос mysql, который восстанавливает данные и помещает их в таблицу для замены таблицы на страница). Когда я нажимаю на кнопки сортировки, все работает, кроме исчезновения qtips. Я использую подсказки к заголовкам изображений ("заголовок"), поэтому, когда я перемещаю изображения в отсортированной таблице, она возвращается к обычной подсказке.
Я считаю, что неправильно то, что $(document).ready означает, что материал qtip будет загружаться только при первой загрузке страницы, поэтому, когда я изменяю таблицу, все qtips исчезают. Я нашел тему на форуме qtip, которая, кажется, связана с моей проблемой ( http://craigsworks.com/projects/forums/thread-solved-reload-qtip-with-new-items), и я попробовал все в этой теме, и я использую последнюю версию qtip, поэтому я использовал on() вместо live(), потому что live() устарела. Это все еще не исправило это. Вот код:
<script type="text/javascript">
jQuery(document).ready(function() {
$('img[title]').on('mouseover', function() {
if( typeof( $(this).data('qtip') ) == 'object' ){ return; }
$(this).qtip({
content: {
text: false
},
style: 'cream',
position: {
viewport: $(window)
}
});
$(this).qtip('show');
});
});
</script>
1 ответ
Сохраняя настройки qTip, можно будет легко (повторно) инициализировать qTip с теми же настройками после загрузки нового содержимого.
Без полного обзора вашего javascript, я не могу быть конкретным, но что-то вроде этого должно сделать это:
jQuery(document).ready(function() {
var qtipOptions = {
content: { text: false },
style: 'cream',
position: { viewport: $(window) }
};
$('img[title]').qTip(qtipOptions);
$("#myButton").on('click', function(){
$.ajax({
//...
//...
//...
success(function(html){
$("#mySelector").html(html);
$('img[title]').qtip('destroy').qtip(qtipOptions);
})
});
});
});