jQuery динамический qtip показывает div, но становится медленнее и медленнее с каждым наведением мыши - PullRequest
Новая
       11

jQuery динамический qtip показывает div, но становится медленнее и медленнее с каждым наведением мыши

3 голосов
/ 25 января 2010

Я использую плагин jQuery qTip, чтобы показать div для ссылки при наведении курсора / img. Я написал 2 варианта использования, но оба вызывают проблемы.

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 недели: -)

Ответы [ 2 ]

4 голосов
/ 25 января 2010

Используйте следующее 

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

Ошибка в вашей первой попытке состояла в том, что вы создавали новую всплывающую подсказку при каждом наведении мыши.

Ваша вторая попытка была связана с тем, что вы использовали функцию, где это было запрещено ..

1 голос
/ 25 января 2010

Попробуйте использовать bind вместо live. Используйте live, только если вы хотите связать событие со всеми классами, которые будут загружаться в будущем с использованием AJAX.

...