JQuery - イメージを.load（）し、.find（）divに.append（）を実行した後に.hover（）

Question

こんにちは:)私はちょっとしたトラブルに遭遇しました。

（ショートフォーム：.each（）によってページが読み込まれるたびに、.hoverと.click関数は動作しません。）ページを手動で作成する場合は.hover（）と.click（）魅力）

以前私はこのいた：

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

と、この、

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

を）。 チャームのように働いて、大したものはありません。私はこれで<imgThumb>を置き換えられるまで：

$.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" 
    }); 
    }); 
    } 
); 

は今の画像が.hover althought汗wahtsoeverせずにロードし、.click機能が仕事を文句を言いません。

誰もがこの騒動を引き起こしている原因を知っていますか？

Answer 1

pageload（非同期など）後に要素をロードする場合は、hoverとclickのようなハンドラを.live()メソッドでアタッチする必要があります。 .live()は、箱から出して（hoverなど）jQueryの賢くリスナーのすべてをサポートしていないことをhttp://api.jquery.com/live/

注：

はここでAPIのページへのリンクです。

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

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

は独自のリスナーを作成することによってこの問題を回避方法がありますが、それはまた別の問題のために別の答えです：あなたは、手動でmouseoverとmouseoutをインスタンス化することに終わる可能性があります。

Answer 2

なぜそれが失敗するのは、新しい項目をJavascriptでページに追加するとDOMが変更され、Javascriptを再レンダリングする必要があるからです。

http://api.jquery.com/live/これを解決するか、DOMが.change()ハンドラーで変更されたかどうかを確認する独自の方法を実装してみてください。