用于动态实时事件的 Tipsy jquery 插件无法正常工作

发布于 2024-12-11 02:43:21 字数 582 浏览 0 评论 0原文

我正在使用 Tipsy jquery 插件为动态显示的元素创建工具提示。

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

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

这是单击触发 AJAX 请求的链接后动态显示在 div 中的图像链接元素的 html：

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

How can I get this tooltip plugin to work?

原文

I'm using the tipsy jquery plugin to create tooltips for dynamically appearing elements.

The tooltips work on non-dynamic elements, so I've definitely included everything that I need. I'm using jquery 1.5.1

This is my jquery code: $('.voted-user-image').tipsy({gravity:'s', live: true});

This is the html of an image link element that appears dynamically in a div after a link is clicked that triggers an AJAX request:

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

How can I get this tooltip plugin to work?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

同尘 2024-12-18 02:43:21

你能试试这个代码吗：

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

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

Can you try this code:

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

Seems so wrong calling plugin each time you add content :)

回复收藏 0 原文

筱武穆 2024-12-18 02:43:21

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

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}); });
}

I have this function that I call in my main.js that works for my whole project. This allows me to add tips to any static element.
I had the same problem with dynamic elements and the solution I found is to call initTipsy again after appending the new element to the html. I know this is not a pretty solution, but it works for sure.
Hope that helps somebody.

回复收藏 0 原文