JQuery - .hover() after .load()ing the image and .append()ed to .find()div

Hi :) I've ran into a bit of a trouble.

(short-form: whenever the page is populated by .each() the .hover and .click functions wont work. althought if i populate the the page manually .hover()s and .click()s work like a charm)

formerly i had this:

<imgThumb imgn="1">thumb</imgThumb>
<imgThumb imgn="2">thumb</imgThumb>

and this,

   $("imgt").hover(
 function () {
  var imgN = $(this).attr("imgn");
  var img = new Image();
  $(img).load(function(){
 $(this).hide();
 $("#mainRight_PubSpot").append(this);
 $(this).fadeIn();
  }
  )
  .attr("src","image/thumb"+imgN+".jpg");
 },开发者_运维百科 
 function () {
   $("#mainRight_PubSpot").find("img:last").remove();
 }

); worked like a charm, no biggies. Until i replaced <imgThumb> with this:

 $.get('gallery.php',
 function(data){
 var obj = jQuery.parseJSON(data); 
 //alert(obj)


 $.each(obj,function(index, value){
   //alert(this);
   var n = index+1;
   //alert(""+n+" "+index);
   var nimg = new Image();
    $(nimg).load(function() {
     $(this).hide();
     /*$("#galImg").css({
      'width':50,
      'height':50
     });*/
     $("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>")
     $("#mainLeft_imgHold").find('imgt:last').append(this);
     $(this).fadeIn();
    }).attr({
     src:""+this,
     imgn:""+n,
     id:"imgThumb"
     });
  });
     }
 );

Now the images load without a sweat wahtsoever althought the .hover and .click functions wont work.

Anyone has a hint on to what might be causing all this commotion?

If you are loading elements after pageload (asynchronously, etc.) you need to attach handlers like hover and click with the .live() method.

Here's a link to the API page: http://api.jquery.com/live/

Note that .live() doesn't support all of jQuery's smarter listeners (like hover) out of the box. You may end up having to instantiate the mouseover and mouseout manually:

$("imgt").live('mouseover', function(){...

$("imgt").live('mouseout', function(){...

There are ways around this by creating your own listeners, but that's another answer for another question.

The reason it fails is because when you add new items to a page with Javascript, the DOM changes and the Javascript needs to be re-rendered.

http://api.jquery.com/live/ can fix this for you, or you can try implementing your own method of checking if the DOM has changed with .change() handler.