带有 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({
      // ...
    });
}

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

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

html

javascript

css

jquery

qtip2