Question

我使用jQuery qTip插件来显示鼠标悬停链接/ img的div。我已经写了2个选项供使用，但两者都引起了麻烦。

V1：第一个版本显示工具提示，只是第二次将鼠标移到链接上。在链接上重复鼠标后，脚本似乎越来越慢，6/7次后我的浏览器几乎崩溃了...这里有什么问题？

V2：在我的第二个版本中，我尝试以正常方式使用qTip，但是尝试将相关div的内容放入qTip内容，但是我们没有发生。可能qTip插件不接受配置中的功能，对吗？

你能看看这两个剧本并告诉我我做错了什么吗？我不明白了。

<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周： - ）

Answer 1

使用以下

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

您第一次尝试的错误是您在每次鼠标悬停时创建了一个新的工具提示..

您的第二次尝试遇到的问题是您使用了不允许的功能..

Answer 2

尝试使用bind代替live。仅当您想要将事件绑定到将来使用AJAX加载的所有类时才使用live。

jQuery动态qtip显示div，但每次鼠标悬停都变得越来越慢

2 个答案: