Why does jQuery qTip2 plugin work in a fiddle but not on my bare webpage?

I encountered the following error while attempting to use the Jquery qtip plug-in:

Firefox 22.0 (Linux Version):

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 Compiled for Ubuntu 12.04:

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

I just tried this on Google Chrome too, in Windows XP VM and got the same result.

The error does not occur initially, only when the event is triggered.

The expected behaviour is that a tooltip will appear within a second or so after the link on the page is clicked, with text supplied via ajax, which says, 'This text came from the server and...'. The tooltip is not appearing.

I've created a fresh page with only minimum elements required to replicate this error, which can be checked here: http://snowweb.net/pages/test.php.

This is the code:

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

The really odd thing though, is that my fiddle works.

Solution

Your reference to $(this) is out of scope.

Live Demo

I am fixing the scope with 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
                }    
            });
        });
    });
});