1

尝试使用jquery qtip插件时遇到如下错误：

火狐 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 版本 28.0.1500.71 为 Ubuntu 12.04 编译：

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

我也刚刚在 Google Chrome 上尝试过这个，在 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>

不过，真正奇怪的是，我的小提琴奏效了。

4

1 回答 1

2

您对 $(this) 的引用超出了范围。

现场演示

我正在修复范围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
                }    
            });
        });
    });
});
于 2013-08-06T06:07:23.167 回答