غير قادر على الحصول على Tooltip للعمل عند استخدام محتوى Load ()

Question

أواجه مشكلة في الحصول على تلميح الأدوات الخاص بي عند استخدام وظيفة jQuery Load (). تعمل Tooltip بشكل جيد إذا لم أستخدم 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);               
        });
    });
}

إليكم jaxloaddata.cfm: إنه يعيد قائمة غير مرتبة

<li><span title="dynamic title here" class="tipthis">date</span></li>

Answer 1

في وظيفة رد الاتصال ، تحتاج إلى تشغيل رمز تلميح الأدوات مقابل العناصر الجديدة ، مثل هذا:

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 بتخزين شظايا مستندات لإعادة الاستخدام.

Answer 2

أستخدم نسخة معدلة من هذه الأدوات. يستخدم هذا الإصدار .live لذلك سيكون للمحتوى الذي تم تحميله تلقائيًا وظائف تلميح الأدوات. كل ما عليك فعله هو:

1. أضف هذا البرنامج النصي إلى صفحتك الرئيسية (إضافته كملف خارجي مُرفق)
2. تحتاج إلى التأكد من أن العناصر التي تحتاج إلى تلميح أدوات لها ملف class="tipthis" وأن محتويات تلميح الأدوات هي ضمن سمة العنوان. أيضًا ، يمكن أن تحتوي تلميح الأدوات على HTML (على سبيل المثال <h1>Tooltip</h1>Hello,<br>World).

3. ستحتاج أيضًا إلى بعض CSS الأساسية:

   #tooltip { background: #f7f5d1; color: #333; padding: 5px; width: 300px; }
   

إليك البرنامج النصي (باستخدام Live ويتطلب إصدار 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>