jQuery的動態qtip顯示格，但得到慢每鼠標懸停

使用jQuery qTip插件顯示鼠標懸停鏈接/ IMG的div。我寫了2個選項使用，但都造成麻煩。jQuery的動態qtip顯示格，但得到慢每鼠標懸停

V1：第一個版本顯示工具提示，僅僅是第二次將我的鼠標在鏈接上。通過鏈接重複我的鼠標後，腳本似乎變得越來越慢，在6/7次後，我的瀏覽器幾乎崩潰了......這裏有什麼問題？

V2：在我的第二個版本，我嘗試使用qTip正常的方式，而是儘量把相關的div的內容到qTip內容，但我們沒有發生。 qTip插件可能不接受配置中的函數，對吧？

你可以看看這2劇本，告訴我，我做錯了什麼？我不明白了。

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title>Project</title> 
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script> <!-- http://craigsworks.com/projects/qtip/ --> 

    <SCRIPT LANGUAGE="JavaScript"> 
    jQuery(document).ready(function() { 

     // hide all tooltip div's 
     $(".tooltip_request").hide(); 


     // V1 - show qtip layer - THIS ONE GETS VERY SLOW AFTER MOUSEOVER-ING several times?? 
     $(".editrequest_v1").live('mouseover', function() { 
      var request = $(this).attr('id'); // "request1" 
      var name_tipdiv = "tooltip"+request; 
      var div_content = $("#"+name_tipdiv).html(); 

      $(this).qtip({ 
       content: div_content, 
       style: 'light', 
      }); 
     }); 

     // V2 - show qtip layer - this one is not getting slow, but does not show the content 
     $(".editrequest_v2").qtip({ 
      content: function() { 
       var request = $(this).attr('id'); // "request1" 
       var name_tipdiv = "tooltip"+request; 
       var div_content = $("#"+name_tipdiv).html(); 
       return div_content; 
      }, 
      style: 'light', 
     }); 
    }); 
    </SCRIPT> 
</head> 
<body> 

    <a href="#" class="editrequest_v1" id="request1">Show tooltip v1/content 1 - get slow and needs 2 times a mouseover before shows tooltip</a><br> 
    <a href="#" class="editrequest_v1" id="request2">Show tooltip v1/content 2 -get slow and needs 2 times a mouseover before shows toolti</a> 
    <div class="tooltip_request" id="tooltiprequest1">CONTENT Tooltip 1</div> 
    <div class="tooltip_request" id="tooltiprequest2">CONTENT Tooltip 2</div><br><br> 

    <a href="#" class="editrequest_v2" id="request3">Show tooltip v2/content 3 - does not show content in tip</a><br> 
    <a href="#" class="editrequest_v2" id="request4">Show tooltip v2/content 4 - does not show content in tip</a> 
    <div class="tooltip_request" id="tooltiprequest3">CONTENT Tooltip 3</div> 
    <div class="tooltip_request" id="tooltiprequest4">CONTENT Tooltip 4</div><br><br> 

</body> 
</html>

非常感謝！

P.S.我是jQuery的新手 - 只有4周:-)

來源

2010-01-25 Guido Lemmens 2

使用在你的第一次嘗試以下

$(".editrequest_v2").each(
    function(){ 
    $(this).qtip({ 
     content: $("#tooltip"+$(this).attr('id')).html(), 
     style: 'light', 
    }); 
    });

錯誤爲您創建的每個鼠標懸停一個新的工具提示..

你的第二次嘗試了您使用功能的地方是問題不允許..

來源

2010-01-25 15:38:48

謝謝！這是偉大的，工作！這是finaly非常邏輯，但我錯過了一些jQuery的/ JavaScript的基礎知識，有時...因爲它創造了一個提示:-) – 2010-01-25 20:53:51

不是這個低效不管，如果你確實曾經鼠標？ – leora 2010-08-01 11:58:52

嘗試使用bind而不是live。僅當您想要將事件綁定到將來使用AJAX加載的所有類時才使用活動。

來源

2010-01-25 15:34:01

jQuery的動態qtip顯示格，但得到慢每鼠標懸停

回答

相關問題