Preview Image Jquery Script don't runs well

Question

I'm using a Jquery script that do a preview image when mouse is hover, but i have the problem that this script only runs in two first images.

To visit the web that I implements: http://81.35.152.41:8888/index.php/ca/dinamic/coleccions

I think that the problem is because I'm printing the html code from de jquery script, because I'm using Ajax and Json with Jquery.

This is the Jquery that print the html code:

(function($) { 
    $(document).ready(function(){

        id=$("#colecciochange option:first").val()
        getcoleccions(id);
            //getpuntosdeventa(1);
                $("#colecciochange").change(function(){

                 getcoleccions($(this).val())

            });
            function getcoleccions(id)
            {
            $("ul.appends").empty()
            $("div.descripcio").empty()


                    $.getJSON('<?php echo url_for('ajax/coleccio/?id=',true)?>'+id, function(data) {



                          $.each(data.items, function(key,val) {

                                //items.push('<p>' + val.nombre + ','+val.direccion + ','+val.ciutad +'</p>');
                                //$("ul.appends").append('<li><a href=' +val.foto_g + ' class="preview" title><img src='+val.foto_th +' alt="prova" /></a></li>');
                                $("#galeria").append('<li><a href="/1.jpg" id="1" class="preview"><img src="/1s.jpg" alt="gallery thumbnail" /></a></li>');

                          });
                          $("div.descripcio").append('<p>' +data.nom_coleccio + '</p>');

                }); 
            }
        });
 })(jQuery)

And this is the script that do the image preview:

this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
  console.log($(this).attr("id"));
    $("a.preview").hover(function(e){
        console.log($(this).attr("id"));

        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                var id=($(this).attr("id"));



        $("#preview")
            .css("top",400 + "px")
            .css("left",150 + "px")
            .fadeIn("fast");                    
   },
    function(){
        this.title = this.t;    
        $("#preview").remove();
   });  
    /*$("a.preview").mousemove(function(e){
   console.log($(this).attr("id"));
        $("#preview")
            .css("top",400 + "px")
            .css("left",150 + "px")

    });*/
   $("a.preview").click(function(event) {
 event.preventDefault();
 //

});         
};
$(document).ready(function(){
    imagePreview();
});

When is the problem?

Thanks

Regards

Answer 1

It's because your imagePreview function is running before your elements are inserted into the page and so they are not getting bound correctly. Insert imagePreview(); into your $.getJSON callback function, immediately below this line:

$("div.descripcio").append('<p>' +data.nom_coleccio + '</p>');

Answer 2

Two things:

• $("a.preview").hover(function(e){...}, function(e){...}) will affect elements that are in the DOM when the document is ready, not the elements that are added to the DOM afterwards using JavaScript. Use $("#galeria").on("mouseenter", "a.preview", function(e){...} and $("#galeria").on("mouseleave", "a.preview", function(e){...} instead
• You have HTML elements with the same id — the id should be unique in the whole HTML page. This can cause issues especially in IE.