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

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

   test this   adf   

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

 content: 'This is the message!', 

我意识到函数loadQtip()中的代码不够具体，只能将新添加的标题更改为新添加的行，但我不确定如何定位新的标题。

目前正如您所见，我只针对class='tips'

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

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

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

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