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

Posted 2023-05-09

【中文标题】用于动态实时事件的 Tipsy jquery 插件不起作用

【英文标题】：Tipsy jquery plugin for dynamic live events is not working

【发布时间】：2011-12-13 01:28:48

【问题描述】：

我正在使用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  src="/system/photos/2/tiny/Justin Meltzer.jpeg?1306836552">
</a>`

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

【问题讨论】：

不幸的是没有javascript错误

从链接中删除title后尝试

插件依赖于title 属性，这就是它把文本从那里拉到工具提示中的地方

【参考方案1】：

你能试试这个代码吗：

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

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

【参考方案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。我知道这不是一个很好的解决方案，但它确实有效。 希望对某人有所帮助。

【参考方案3】：

它应该可以正常工作..

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

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

【参考方案4】：

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

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

【参考方案5】：

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

【讨论】：

对您对自己的问题给出的答案投反对票对我来说似乎很奇怪。 ;-) 但是，这不是正确的答案，并且会对性能和代码可维护性产生负面影响。海豚说得对。 .live() 本身被认为是相对低效的（例如与 .delegate() 相比），但它可以通过一个绑定正确完成工作。它是插件选项的一部分，不需要额外的大惊小怪。

我在添加 live:true 时遇到问题。在控制台中它说“未捕获的类型错误：对象 [对象对象] 没有方法 'live'” 有没有其他方法可以解决这个问题，在新添加的 div 上添加一个醉意？