JQuery plugin for dynamic live events not working

Question

I am using a custom jquery plugin to create tooltips for dynamically displayed elements.

Tooltips work on non-dynamic elements, so I definitely included everything I need. I am using jquery 1.5.1

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

This is the html of the image link element that appears dynamically in the div after clicking the link that launches the 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?

Answer 1

I just called the plugin again in the script tag in the div that provided the AJAX request. It worked.

Answer 2

Can you try this code:

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

It seems that the plugin is incorrectly connected every time you add content :)

Answer 3

 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, which works for my entire project. This allows me to add tooltips to any static element. I had the same problem with dynamic elements, and the solution I found was to call initTipsy again after adding a new element to html. I know this is not a good solution, but it works for sure. Hope that helps someone.

Answer 4

It should work fine ...

check the example .. http://jsfiddle.net/gaby/3pAue/2/ (uses sub-tips and 1.5.1 jQuery)

The error should be somewhere else. Make sure your html is valid (the one that was added by ajax and it is valid to place where you put it.)

Answer 5

Not sure why Dolphin’s answer was rewarded or even rewarded with a bonus reputation. He suggests using the live jQuery tipsy option, but this is already used in the code represented by the original poster (unedited). Obviously, this option did not seem to do the trick.

To answer the original message: the live option of the tipsy plugin does not seem to work with all versions of jQuery. Version 1.7.1 is confirmed to work, so updating jQuery might be a good idea.