预览图像jquery脚本运行不好

我正在使用一个Jquery脚本来做鼠标悬停时的预览图像，但我遇到了这个脚本只能在两个第一张图像中运行的问题。预览图像jquery脚本运行不好

要访问我实现了网络：http://81.35.152.41:8888/index.php/ca/dinamic/coleccions

我认为这个问题是因为我打印从德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(); 
});

当是什么问题？

感谢

问候

来源

2012-02-18 Marc Morales Valldepérez

为什么你不能发布相关的代码和HTML而不是让人们去不同的网站？ – Oded 2012-02-18 10:43:57

好的，对不起，走吧！ – 2012-02-18 10:48:14

对不起，我如何编辑帖子？ – 2012-02-18 10:49:01

这是因为您的imagePreview函数在元素插入到页面之前正在运行，因此它们没有正确绑定。插入imagePreview（）;到您的$ .getJSON回调函数中，立即在该行下面：

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

来源

2012-02-18 11:01:10

运行！谢谢！！！ – 2012-02-18 11:13:15

两件事情：

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

来源

2012-02-18 11:00:16 satoshi

预览图像jquery脚本运行不好

回答

相关问题