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

发布于 2024-08-19 14:23:41 字数 2865 浏览 4 评论 0原文

我使用 jQuery qTip 插件来显示鼠标悬停链接/img 的 div。 我写了两个选项来使用,但这两个选项都造成了麻烦。

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>

非常感谢!

PS 我是 jQuery 的新手 - 只有 4 周:-)

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

殊姿 2024-08-26 14:23:41

使用以下内容

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

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

您的第二次尝试遇到了问题,您使用了不允许的函数。

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

云裳 2024-08-26 14:23:41

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文