невозможно заставить всплывающую подсказку работать при использовании содержимого jQuery load()
-
23-09-2019 - |
Вопрос
У меня возникла проблема с работой всплывающей подсказки при использовании функции jQuery load().Всплывающая подсказка работает нормально, если я не использую load() для загрузки внешних динамических данных.
Я погуглил и обнаружил, что мне, возможно, понадобится использовать live(), но я не могу понять, как заставить его работать.Любое предложение?
Спасибо!!
Вот мои скрипты:
function loadEMERContent(uid) {
$("#ActionEWPNBook").load("ajaxLoadDATA.cfm?uid="+uid, null, showLoading);
$("#EWPNBookloading").html('<img src="/masterIncludes/images/ajaxLoading.gif" alt="loading" align="center" />');
}
function showLoading() {
$("#EWPNBookloading").html('');
}
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p style='padding:5px;'>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).stop().fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.stop().fadeOut(400);
});
});
}
Вот мой ajaxLoadDATA.cfm:он возвращает неупорядоченный список
<li><span title="dynamic title here" class="tipthis">date</span></li>
Решение
В вашей функции обратного вызова вам нужно запустить код всплывающей подсказки для новых элементов, например:
function showLoading(data) { //data = the response text, passed from `.load()`
$("#EWPNBookloading").html('');
var items = //get items here, something like $('.giveMeATooltip', data);
var name = //set name, not sure what you're using for this
simple_tooltip(items, name);
}
Один боковой совет, если вы измените эту строку:
$("body").append("<div class='"+name+"' id='"+name+i+"'><p style='padding:5px;'>"+$(this).attr('title')+"</p></div>");
Что-то вроде этого:
$("body").append(
$("<div></div>", { 'class': name, 'id': name + i }).append(
$("<p style='padding:5px;'></p>").text($(this).attr('title'))
)
);
Создание всплывающей подсказки будет много быстрее благодаря тому, что jQuery может кэшировать фрагменты документов для повторного использования.
Другие советы
Я использую модифицированную версию эта подсказка.В этой версии используется .live
поэтому загруженный контент автоматически будет иметь функцию всплывающей подсказки.Все, что вам нужно сделать, это:
- Добавьте этот скрипт на свою главную страницу (предпочтительно добавить его как внешний файл)
- Вам необходимо убедиться, что элементы, которым нужна всплывающая подсказка, имеют
class="tipthis"
и что содержимое всплывающей подсказки находится внутри атрибута title.Кроме того, всплывающая подсказка может содержать HTML (например,<h1>Tooltip</h1>Hello,<br>World
). Вам также понадобится базовый CSS:
#tooltip { background: #f7f5d1; color: #333; padding: 5px; width: 300px; }
Вот скрипт (используется в реальном времени и требует jQuery версии 1.4+)
/* Tooltip script */
this.tooltip = function(){
// Defaults
var tooltipSpeed = 300; // fadein speed in milliseconds
var xOffset = 20; // Don't use negative values here
var yOffset = 20;
$('.tipthis').live('mouseover',function(e) {
this.t = this.title;
this.title = '';
$('<div></div>', {
id : 'tooltip',
css: {
display : 'none',
position: 'absolute',
zIndex : 1000,
top : (e.pageY - xOffset) + 'px',
left : (e.pageX + yOffset) + 'px'
}
})
.html( this.t )
.appendTo('body');
$('#tooltip').fadeIn(tooltipSpeed);
})
.live('mouseout',function(){
this.title = this.t;
$('#tooltip').remove();
})
.live('mousemove',function(e){
$("#tooltip").css({
top : (e.pageY - xOffset) + 'px',
left: (e.pageX + yOffset) + 'px'
});
})
}
$(document).ready(function(){ tooltip(); });
Вот пример HTML:
<a href="#" class="tipthis" title="This is some tooltip content">Hover over me!</a>