jquery qtip不工作，但在控制檯沒有錯誤

我一直堅持了幾個小時，並不知道爲什麼。我需要實現的很簡單，我有一些「tr」，每個td都有一個唯一的標題名稱。基於標題名稱，我需要爲每個「td」單元顯示一個工具提示。我以前成功實施過qtip，所以我知道如何配置它。但是，問題是qtip根本無法工作，即使是一個簡單的內容。有線的是，控制檯中沒有錯誤信息，所以我不知道爲什麼。jquery qtip不工作，但在控制檯沒有錯誤

這裏是JS：

$(document).ready(function() { 

    var hoverElem = null; 
    $("table.confirmit-grid.borderseparate tbody tr td").on('click mouseover', function (e) { 
     hoverElem = this; 
     if ($(hoverElem).attr('headers') == 'non_import_header1') { 
      $(hoverElem).qtip({ 
       content: { 
        text: 'hello' 
       } 

      }); 
     } 

    });

和HTML部分是的jsfiddle。 http://jsfiddle.net/matildayipan/2yztzdgc/

任何人都可以幫我嗎？我真的很感激〜

來源

2014-10-02 Matilda Yi Pan

似乎

$（「table.confirmit-grid.borderseparate TBODY TR TD」）。長度

返回0，所以qtip是不適用於任何元素。由於類名稱中的點出現問題。它可以通過選擇逃逸的點來避免：

$("table.confirmit-grid\\.borderseparate tbody tr td")

其實，這裏是我會怎麼寫呢（無需重新定義點擊/鼠標懸停事件，即會自動由qtip函數來完成）：

$(document).ready(function() { 
var hoverElem = null; 
$("table.confirmit-grid\\.borderseparate tbody tr td").each(function(index) { 
    if ($(this).attr("headers") == "non_import_header1") { 
     $(this).qtip({ 
      content: { 
       text: 'hello' 
      } 
     }); 
    } 
});

[編輯]爲什麼這句法的工作原理：

當你做$("yourSelector").qtip({content:{text:"Hello !"}});，他們做的是應用工具提示插件的所有選擇器匹配的元素。被調用的插件構造函數爲您完成所有工作，並創建正確的事件處理程序，因此您不必親自操作。

這段代碼的問題在於，它試圖每次都創建一個新的qtip 有一個click/mouseover，而不是創建一個然後顯示它。我的猜測是，由於事件處理程序創建了一個新的插件，它可以防止以前創建的qtips被顯示，因此什麼也不顯示。

注意，在這種情況下，我用.each()因爲條件$(this).attr("headers") == "non_import_header1"，但實際上是懶惰的我，因爲我敢肯定的attribute condition可以整合的元素選擇成才這樣的：

$("table.confirmit-grid\\.borderseparate tbody tr td[headers='non_import_header1']").qtip({ 
      content: { 
       text: 'Hello ! Yay for short code !' 
      } 
     } 
);

來源

2014-10-02 07:46:49 cmousset

謝謝你指出我愚蠢的錯誤〜它現在起作用，也因爲「每個」功能。我不知道爲什麼'.on（「click mouseover」function（）{}）'不起作用，因爲點擊或鼠標懸停元素時會出現工具提示。然而，對於'.each（function（）{}）'，出現工具提示可以點擊或在沒有事件聲明的情況下將鼠標懸停在元素上。請問您能解釋爲什麼？我真的很困惑〜謝謝。 – 2014-10-07 23:36:06

@MatildaYiPan我添加了一些解釋（和選擇器改進）。告訴我，如果這爲你澄清它！ – cmousset 2014-10-08 12:40:08

謝謝你的詳細解釋〜真的很感謝。我假設qtip內部只有鼠標懸停或懸停的事件處理程序。所以qtip被註冊到選擇器，並且當元素與選擇器匹配並且事件是HOVER或者MOUSEOVER時它將被觸發。希望我的理解是正確的〜再次感謝〜 – 2014-10-10 00:23:39

你

$("table.confirmit-grid.borderseparate tbody tr td")

沒有在控制檯給予任何元素爲您之前選擇在和類。這將被視爲另一類。例如例如myclass.anotherClass它會給這個元素

<div class="myClass anotherClass">

所以我改變選擇到

$（「表TBODY TR TD」）上（「點擊」，函數（）{} ）

來源

2014-10-02 07:55:17

jquery qtip不工作，但在控制檯沒有錯誤

回答

相關問題