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不工作，但在控制台没有错误

回答

相关问题