Question

尝试使用Jquery qtip插件时遇到以下错误：

Firefox 22.0（Linux版）：

Error: NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
Source File: http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js
Line: 6

Chromium Version 28.0.1500.71为Ubuntu 12.04编译：

Uncaught TypeError: Cannot read property 'width' of undefined jquery.min.js:6

我刚刚在谷歌浏览器上尝试了这个，在Windows XP VM中也得到了相同的结果。

最初，只有在触发事件时才会发生错误。

预期的行为是，在点击页面上的链接后，工具提示将在一秒钟左右出现，文本通过ajax提供，其中显示“此文本来自服务器并且......”。工具提示没有出现。

我创建了一个新页面，其中只包含复制此错误所需的最少元素，可在此处查看：http://snowweb.net/pages/test.php。

这是代码：

<? header('Content-type: text/html; charset=utf-8') ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>

        <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.css" />

        <!-- /stylings -->

        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.js"></script>
        <!-- /scripts -->

    </head>
    <body>

        <a href="../ajax/tt_hosting-enterprise.php" class="ajax_TT">
        Enterprise hosting</a>

        <script type="text/javascript">

            $(window).load(function() {
                $(".ajax_TT").click(function(e) {
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                    var link = $(this).attr('href');
                    $.ajax({
                        url     : link,
                        cache   : false,
                        method  : 'post',
                        data    : {
                            html    : ""
                        }
                    }).done(function(html) {

                        $(this).qtip({
                            content : {
                                text : html
                            }
                        });
                        $(this).qtip('toggle', true);

                    });
                });
            });

        </script>
    </body>
</html>

真的很奇怪的是，我的fiddle有效。

Answer 1

您对$（this）的引用超出了范围。

Live Demo

我正在使用var $this=$(this);

修复范围

$(function () {
    $(".ajax_TT").on("click",function (e) {
        e.preventDefault(); // normalized for IE
        var $this=$(this);
        var link = $this.attr('href');
        $.ajax({
            url: link,
            cache: false,
            data: {
                html: "<p>Text echoed back to request</p>"
            },
            method: 'post'
        }).done(function (html) {
            $this.qtip({
                content: {
                    text: html
                },
                style: 'qtip-wiki',
                show: {
                  ready: true
                }    
            });
        });
    });
});

为什么jQuery qTip2插件工作在一个小提琴中而不是在我裸露的网页上？

1 个答案: