jQuery dynamische qtip zeigt, div, sondern wird langsamer und langsamer mit jedem mouseover

Verwende ich jQuery qTip plugin to show divs für einen mouseover-link/img.
Ich schrieb 2 Optionen zu verwenden, aber beide verursachen Probleme.

V1: die erste version zeigt den tooltip, nur das zweite mal, dass ich meine Maus über den link. Nach Wiederholung meiner Maus über den link, das script scheint langsamer und langsamer und nach dem 6/7 mal mein browser fast abstürzt... Was ist hier das problem?

V2: in meine zweite version ich versuche es mal mit qTip dem normalen Weg, sondern versuchen Sie, den Inhalt der zugehörigen div-Element in das qTip Inhalt, sondern, dass uns nicht passiert. Wohl die qTip plugin nicht annehmen, Funktionen innerhalb der Konfiguration, richtig?

Können Sie sich diese 2-Skript und Sag mir, was ich falsch mache? Ich verstehe nicht mehr.

<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>

Viele Dank!

P. S. ich bin ein Neuling auf jQuery - nur 4 Wochen 🙂

InformationsquelleAutor Guido Lemmens 2 | 2010-01-25
  1. 4

    Verwenden Sie die folgenden

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

    Den Fehler beim ersten Versuch war, dass man erstellt eine neue QuickInfo zu jedem mouseover..

    Ihrem zweiten Versuch hatte das problem, dass Sie eine Funktion verwenden, wo es nicht erlaubt war ..

    • Danke! Das ist toll und funktioniert! Es ist schließlich sehr Logik, aber mir fehlen einige jquery - /javascript-Grundlagen manchmal... 🙂
    • ist das nicht ineffizient, als es erstellt ein tooltip unabhängig davon, ob Sie tatsächlich jemals mit der Maus über ??
    InformationsquelleAutor Gabriele Petrioli
  2. 1

    Versuchen Sie es mit bind statt live. Verwenden Sie nur Leben, wenn Sie wollen, binden Sie das Ereignis alle Klassen, welche Belastungen in Zukunft mit AJAX.

    InformationsquelleAutor Teja Kantamneni
Schreibe einen Kommentar