プレビュー画像Jqueryスクリプトが正常に実行されない

Question

マウスを動かしたときにプレビュー画像を表示するJqueryスクリプトを使用していますが、このスクリプトが最初の2つの画像でのみ実行されるという問題があります。私が実装するWeb訪問する

：http://81.35.152.41:8888/index.php/ca/dinamic/coleccions

を私はjQueryを使ってAjaxとJSONを使用していますので、私は、デjqueryのスクリプトからHTMLコードを印刷していますので、問題があると思います。

これは、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関数が実行されているために正しくバインドされないためです。 Insert imagePreview（）;あなたの$ .getJSONコールバック関数に次の行を追加してください：

Answer 2

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){...}を使用してください。
• 同じIDのHTML要素があります.IDはHTMLページ全体で一意である必要があります。これは特にIEで問題を引き起こす可能性があります。