Question

我正在使用Jquery脚本在鼠标悬停时执行预览图像，但我遇到的问题是此脚本只在两个第一张图像中运行。

访问我实施的网站：http://81.35.152.41:8888/index.php/ca/dinamic/coleccions

我认为问题是因为我从de jquery脚本打印html代码，因为我正在使用Ajax和Json与Jquery。

这是打印html代码的Jquery：

(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)

这是执行图像预览的脚本：

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

什么时候出现问题？

由于

此致

Answer 1

这是因为在将元素插入页面之前，您的imagePreview函数正在运行，因此它们没有被正确绑定。插入imagePreview（）;进入你的$ .getJSON回调函数，紧接在这一行之下：

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

Answer 2

两件事：

$("a.preview").hover(function(e){...}, function(e){...})会影响文档准备好时DOM中的元素，而不会影响之后使用JavaScript添加到DOM中的元素。请改用$("#galeria").on("mouseenter", "a.preview", function(e){...}和$("#galeria").on("mouseleave", "a.preview", function(e){...}
您的HTML元素具有相同的ID - 整个HTML页面中的ID应该是唯一的。这可能会导致问题，特别是在IE中。

预览图像Jquery脚本运行不正常

2 个答案: