动态javascript数据与qtip覆盖所有工具提示相同的消息 [英] dynamic javascript data with qtip is overriding all tooltips with same message

问题描述

我有一个循环，其中出现许多不同的唯一工具栏（标题）消息。此 jsfiddle 显示了我遇到的问题。如果你滚动的默认文本框，那里你正确看到 title test ：

 < tr> 
< td class =tipstitle ='title test'> 
 test this 
< / td> 
< td> 
 adf 
< / td> 
< / tr> 
  

我有一个循环，它模拟我的生产代码，虽然它不是唯一的数据，是完全改变所有标题，包括悬停时的工具提示（标题）的现有标题

  content：这是消息！'，
  

我意识到函数 loadQtip（）不够特定，只能将新添加的标题更改为新添加的行，但我不知道如何定位新的。

目前正在显示我只指定 class ='tips'

http://jsfiddle.net/bthorn/tw6mLcL1/

显示OP回答以及非常接近我自己的数据的新小提琴

http://jsfiddle.net/bthorn/Lpuf0x7L/1/

.tips 后代元素直接传递给 loadQtips 函数。在这样做时，元素的作用域正确，并且qTips只在新元素上初始化。

更新示例

  
 
 while（count--> 0）{
 $ cloned = first_row.clone（）; 
 loadQtip（$ cloned.find（'。tips'））; 
 $ cloned.appendTo（'＃blacklistgrid'）; 
} 
 
 // ... 
 
函数loadQtip（selector）{
 $（selector）.qtip（{
 // ... 
}）; 
} 
 
 // ... 
  

值得指出的是，属性 data-hasqtip 被添加到已经初始化工具提示的所有元素。因此，您可以使用选择器 data-hasqtip 属性的 .tips > .tips：not（[data-hasqtip]）。

但是，已经具有该属性的元素。

Example

  function loadQtip（selector）{
 $ （'.tips：not（[data-hasqtip]）'）。qtip（{
 // ... 
}）; 
} 
  

I have a loop in which many different unique toolbar (title) messages appear. This jsfiddle shows the problem I'm having. If you rollover the default textbox that is there you correctly see title test which is in:

<tr>
    <td class="tips" title='title test'>
        test this
    </td>
    <td>
        adf
    </td>
</tr>

I have a loop in which it simulates my production code albeit it is not unique data, but the issue is that it is completely changing all the titles including the existing title for the tooltip (title) on hover to be

content: 'This is the message!',

I realize that the code in the function loadQtip() is not specific enough to only change newly added titles to the newly added rows, but I am not sure how to target the new ones.

Currently as you see I am only targeting class='tips'

http://jsfiddle.net/bthorn/tw6mLcL1/

New fiddle that is showing OP answer along with data that is very close to my own

http://jsfiddle.net/bthorn/Lpuf0x7L/1/

解决方案

One approach would be to pass the cloned .tips descendant elements directly to the loadQtips function. In doing so, the elements are scoped correctly, and the qTips are only initialized on the new elements.

Updated Example

// ...

while (count-- > 0) {
  $cloned = first_row.clone();
  loadQtip($cloned.find('.tips'));
  $cloned.appendTo('#blacklistgrid');
}

// ...

function loadQtip(selector) {
    $(selector).qtip({
      // ...
    });
}

// ...

Alternatively, it's worth pointing out that the attribute data-hasqtip is added to all element that have tooltips initialized. Therefore you could simply negate all .tips elements that have a data-hasqtip attribute using the selector .tips:not([data-hasqtip]).

However, that doesn't actually work in your case because you are cloning the element that already have that attribute. You could work around that by cloning the elements before they have that attribute.

Example Here

function loadQtip(selector) {
    $('.tips:not([data-hasqtip])').qtip({
      // ...
    });
}

这篇关于动态javascript数据与qtip覆盖所有工具提示相同的消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！