Compatibility problem

Compatibility problem

Hi all,
I'm new to jQuery and JavaScript programming.
I encountered my first really hard problem with javascript and compatibility with browsers.

I have a PHP page that show a set of images that can be filtered (with a fadeOut of the no more needed images and a fadeIn of the new) through a set of selects and a button. 
Each images on the event "onclick" will call a function "showInfo".

My problem is that the "old" images rightly call the "onclick" function, but the "new" images don't call the onclick function.

This is the code (in the onload() function) of the filter button that add the images to the page: 
  1. // Onclick on the filter button
  2. $('#leftCol #search #submit').click(function() { 
  3.     var searchColor = $('#search #color').val();
  4.     var searchArmor = $('#search #armor').val();
  5.     var searchGraphics = $('#search #graphics').val();
  6.     $.getJSON("scripts/dbQueryFilter.php", {...}, function(data) { 
  7.         $.each(data, function(i,item){
  8.     $('<img />').attr("src", "database/"+item.filename).attr("alt", "preview").attr("onclick", "javascript:showInfo('database/"+item.filename+"');").appendTo("#list");
  9.     });
  10. });
  11.     });
  12. });

  13. // Onclick on the filter button
  14. $('#leftCol #search #submit').click(function() { 

  15.     var searchColor = $('#search #color').val();
  16.     var searchArmor = $('#search #armor').val();
  17.     var searchGraphics = $('#search #graphics').val();
  18.     $.getJSON("scripts/dbQueryFilter.php", {...}, function(data) { 
  19.         $.each(data, function(i,item){
  20.     $('<img />').attr("src", "database/"+item.filename).attr("alt", "preview").attr("onclick", "javascript:showInfo('database/"+item.filename+"');").appendTo("#list");
  21.     });
  22. });
  23.     });
  24. });

  25. function showInfo(src) {
  26.     $('#rightCol #description #image img').attr("src", src);
  27.     $.getJSON("scripts/dbQueryDscrpt.php", { fname:  src }, function(data) { 
  28.     $("#rightCol #description #text").html( ... ) });
  29. }
The new inserted html img tag and the already existing are correct.

This is the onclick function:
  1. function showInfo(src) {
  2.     $('#rightCol #description #image img').attr("src", src);
  3.     $.getJSON("scripts/dbQueryDscrpt.php", { fname:  src }, function(data) { 
  4.     $("#rightCol #description #text").html( ... ) });
  5. }
Both the snipplets of code are in the same js script file.

If someone needs more info to help me, fell free to ask.
Thanks.
    • Topic Participants

    • piva