带有qtip的动态javascript数据覆盖了具有相同消息的所有工具提示

dynamic javascript data with qtip is overriding all tooltips with same message

本文关键字：工具提示 消息 动态 qtip javascript 数据 覆盖 带有      更新时间：2023-09-26

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

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

我有一个循环，它模拟了我的生产代码，尽管它不是唯一的数据，但问题是它完全改变了所有标题，包括悬停时工具提示（标题）的现有标题，使其成为

content: 'This is the message!',

我意识到函数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');
}
// ...
function loadQtip(selector) {
    $(selector).qtip({
      // ...
    });
}
// ...

或者，值得指出的是，属性data-hasqtip已添加到所有已初始化工具提示的元素中。因此，您可以使用选择器.tips:not([data-hasqtip])简单地否定所有具有data-hasqtip属性的.tips元素。

然而，这在您的情况下实际上并不起作用，因为您正在克隆已经具有该属性的元素。您可以通过在元素具有该属性之前对其进行克隆来解决此问题。

此处示例

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