jQuery dynamic qtip shows div, but gets slower and slower with every mouseover

问题

I use jQuery qTip plugin to show divs for a mouseover link/img. I have wrote 2 options to use, but both are causing troubles.

V1: the first version shows the tooltip, only the second time I move my mouse over the link. After repeating my mouse over the link the script seems to get slower and slower and after 6/7 times my browser is almost crashing... What is the problem here?

V2: in my second version I try to use qTip the normal way, but is try to put the content of the related div into the qTip content, but that us not happening. Probably the qTip plugin does not accept functions inside the configuration, right?

Can you look to these 2 script and tell me what I'm doing wrong? I don't understand anymore.

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

A lot of thanks!

P.S. I'm a newbie to jQuery - just 4 weeks :-)

回答1:

Use the following

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

The error in your first attempt was that you created a new tooltip on each mouseover..

Your second try had the problem that you use a function where it was not allowed ..

回答2:

Try using bind instead of live. Use live only if you want to bind the event to all the classes which loads in future using AJAX.

来源：https://stackoverflow.com/questions/2133215/jquery-dynamic-qtip-shows-div-but-gets-slower-and-slower-with-every-mouseover

标签

jquery

ajax

performance

qtip