javascript - 使用qtip的动态javascript数据会用相同的消息覆盖所有工具提示

我有一个循环，其中出现许多不同的唯一工具栏（标题）消息。此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仅在新元素上初始化。

Updated Example

// ...

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

// ...

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

// ...

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

但是，这实际上不适用于您的情况，因为您正在克隆已经具有该属性的元素。您可以通过在元素具有该属性之前克隆它们来解决此问题。

Example Here

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

关于javascript - 使用qtip的动态javascript数据会用相同的消息覆盖所有工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34497097/