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

Question

我有一个循环，其中出现许多不同的独特工具栏(标题)消息。这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 答案的新 fiddle 以及非常接近我自己的数据

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

Answer 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:not([data-hasqtip]) 简单地否定所有具有 data-hasqtip 属性的 .tips 元素>.

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

Example Here

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