Tipsy jquery plugin for dynamic live events is not

问题:

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?

回答1:

Can you try this code:

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

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

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

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.

回答3:

It should work just fine..

check the example .. http://jsfiddle.net/gaby/3pAue/2/ (uses tipsy,and 1.5.1 jQuery)

The error must lie somewhere else.. make sure your html is valid (the one brought by ajax, and it is valid to be placed where you place it..)

回答4:

Not sure why Dolphin's answer got upvoted and even rewarded bonus reputation. He suggests using the live option of jQuery tipsy, but this is already used in the code presented by the original poster (unedited). Obviously the option did not seem to do the trick.

To answer the original post: the live option of the tipsy plugin does not seem to work well with all versions of jQuery. Version 1.7.1 has been confirmed to work, so upgrading jQuery might be a good idea.

回答5:

I just called the plugin again in a script tag in the div that the AJAX request rendered. That worked.