爲什麼jQuery qTip2插件在小提琴中工作，但不在我的裸露網頁上？

我遇到了以下錯誤而嘗試使用Jquery的qtip插件：爲什麼jQuery qTip2插件在小提琴中工作，但不在我的裸露網頁上？

火狐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

鉻版本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>

真正奇怪的事情雖然是我的作品fiddle。

來源

2013-08-06 Peter Snow

範圍頁面是否被解釋？刪除php頭如果不是 – mplungjan

另外jQuery UI也有工具提示 – mplungjan

我剛剛刪除了開發環境中的字符編碼，問題依然存在。我認爲所有頁面都應該在頁眉編碼中發送。至於'UI'。如果我沒有得到這個工作，我可能會看看它，但我寧願讓它工作。 –

您對$（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 
       }  
      }); 
     }); 
    }); 
});

來源

2013-08-06 06:07:23 mplungjan

謝謝這是修復它。 –

請參閱更新 - 我修復了範圍，以便您可以有多個鏈接 – mplungjan

謝謝。我也是，但你的解決方案更好:-) –

爲什麼jQuery qTip2插件在小提琴中工作，但不在我的裸露網頁上？

回答

相關問題