動的にロードされた要素上で機能するようにマウスイベントを取得する

Question

ajaxでロードされた要素を処理しようとしている単純なmouseoverイベントがあります。たとえば、マウスオーバーで別のdivを表示/非表示にするdivがあります。これらのdivをajaxで読み込むと、もう機能しなくなります。

をしかし、私は別のページからそれらの要素をロードする場合：：これはまっすぐthisのような正常に動作しません

<div class="block"> 
    <div class="something">MOUSEOVER</div> 
    <div class="else" style="display: none" >HI</div> 
</div> 

$(document).ready(function(){ 
    //using on hoping to catch the mouse events 
    $('.block').on('mouseenter',function(){ 
     $(this).children('.else').fadeIn('fast'); 
    }); 
    $('.block').on('mouseleave',function(){ 
     $(this).children('.else').fadeOut('fast'); 
    }); 
}); 

：

$j('#trigger').load(url + " .block"); 

マウスイベントはもはや認識されている例。私はこれがだと思ったlive、on、delegateのためだった。誰かが私を助けてくれますか？

Answer 1

一つの可能​​性は次のようにコードを変更することです。

他の可能性は$.live();です。 Like：

$('.block').live('mouseenter', function() { 
    //here your code 
}); 

Answer 2

これはまさにonとdelegateのような方法を使用できますが、正しく使用する必要があります。あなたが経由して、全体.block要素をロードしているよう

$(".someAncestor").on("mouseenter", ".something", function() { 
    //Executed when .something triggers the mouseenter event 
}); 

に見えます：彼らはすでに存在していた祖先要素にイベントをキャプチャする必要がDOMを通って上に発信された上で要素からのイベントバブルのよう

AJAXので、DOMツリー（おそらく.blockを追加する要素）の上のどこかでイベントをバインドする必要があります。

Answer 3

トリガーイベントを挿入して、AJAXの成功を反映させることができます。可能なロードされたコンテンツ内のMouseEnterまたはmouseleaveのように、この関数を作るために

var myFunc = function() { 
    $('.block').on('mouseenter',function(){ 
     $(this).children('.else').fadeIn('fast'); 
    }); 
    $('.block').on('mouseleave',function(){ 
     $(this).children('.else').fadeOut('fast'); 
    }); 
} 

$('#trigger').load(url + " .block", function() { 
    myFunc(); 
}); 

：