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>
しかし、本当に奇妙なことは、私のフィドルが機能することです。