image preview doesnt work on ajax embedded links

Question

im using a jquery image preview plugin for showing preview of my link images when having the mouse over them.

 http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

it works on links with images like:

 <a href="http://website/1.jpg"&gt;&lt;img src="http://website/1_thumbnail.jpg"&gt;&lt;/a&gt;

however, it doesnt work on links which i have embedded into DOM with jquery ajax.

i wonder how i could have this working.

the code implementing it is very simple:

 $('a').imgPreview({
       distanceFromCursor: {top: -20, left: 20}
 });

i have 1 approach in mind:

use jquery live function (that responses to the later embedded links) and couple it somehow to the code above.

$('a').live('mouseover', function() {
    // call the preview code here
});

but i dont know how to call it. AND this is not a very great solution cause then nothing happens when i click on the link.

would appreciate any help i can get. other approaches would be appreciated.

Answer 1

Are you using jquery 1.4? If so, first try putting quotes around top and left so that it reads "top": and "left":

If you're using a previous version of jquery, try using the jQuery livequery plugin. Once you install that, call your code like this:

$('a').livequery(function(){
  $(this).imgPreview({ distanceFromCursor: {top: -20, left: 20} })
});