1

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

Ubuntu 12.04 用にコンパイルされた Chromium バージョン 28.0.1500.71:

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

Windows XP VMのGoogle Chromeでもこれを試したところ、同じ結果が得られました。

エラーは最初は発生せず、イベントがトリガーされたときにのみ発生します。

予想される動作は、ページ上のリンクがクリックされてから 1 秒ほどでツールチップが表示され、「このテキストはサーバーから取得されたものであり、...」という 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 に答える