用于动态实时事件的 Tipsy jquery 插件不起作用

Question

我正在使用the tipsy jquery plugin 为动态显示的元素创建工具提示。

工具提示适用于非动态元素，因此我肯定包含了我需要的所有内容。我正在使用 jquery 1.5.1

这是我的 jquery 代码：$('.voted-user-image').tipsy({gravity:'s', live: true});

这是一个图像链接元素的 html，在点击触发 AJAX 请求的链接后动态出现在 div 中：

<a href="/profiles/2" class="voted-user-image" title="Test">
    <img alt="Justin meltzer" src="/system/photos/2/tiny/Justin Meltzer.jpeg?1306836552">
</a>`

我怎样才能让这个工具提示插件工作？

Answer 1

你能试试这个代码吗：

$('a.voted-user-image').tipsy({live: true});

每次添加内容时调用插件似乎都错了:)

Answer 2

function initTipsy(){
    $(function(){ $('.tips').tipsy({gravity: 's',html: true}); });
    $(function(){ $('.tips-right').tipsy({gravity: 'w',html: true}); });
    $(function(){ $('.tips-left').tipsy({gravity: 'e',html: true}); });
    $(function(){ $('.tips-bottom').tipsy({gravity: 'n',html: true}); });
}

我在我的 main.js 中调用了这个函数，它适用于我的整个项目。这允许我向任何静态元素添加提示。 我对动态元素有同样的问题，我找到的解决方案是在将新元素附加到 html 后再次调用 initTipsy。我知道这不是一个很好的解决方案，但它确实有效。 希望对某人有所帮助。

Answer 3

它应该可以正常工作..

查看示例 ..http://jsfiddle.net/gaby/3pAue/2/（使用 Tipsy 和 1.5.1 jQuery）

错误一定出在其他地方..确保你的html是有效的（ajax带来的那个，放在你放的地方是有效的..）

Answer 4

不知道为什么 Dolphin 的回答得到了支持，甚至获得了奖励声望。他建议使用 jQuery Tipsy 的 live 选项，但这已经在原始海报提供的代码中使用（未经编辑）。显然，该选项似乎没有起到作用。

回答原帖：tipsy 插件的live 选项似乎不适用于所有版本的jQuery。版本 1.7.1 已经确认可以工作，所以升级 jQuery 可能是个好主意。

Answer 5

我刚刚在 AJAX 请求呈现的 div 中的 script 标记中再次调用了该插件。那行得通。