jQuery ajaxのロードまたはアップデート後、mouseoverイベントが失われる

Question

.loadを使用してdivを更新した後、そのアイテムがリストに追加され、firebugを使用してリストが更新されたことがわかりました。

// hide and show are css classes that display none and block respectively 

function openList(){ 
    $("#miniList").removeClass().addClass("show"); 
} 
function closeList(){ 
    $("#miniList").removeClass().addClass("hide"); 
} 
... 
$(document).ready(function() { 
    $("#miniList").mouseover(function() { 
     openList(); 
    }) 
    $("#miniList").mouseout(function() { 
     closeList(); 
    }) 
}); 

---

function addItemToDiv(id, ref, num) { 
    $("#miniList").load("/list/ajax_updateList.jsp", { 
     'action' : 'additem', 
     'pid' : id, 
     'pref' : ref, 
     'qty' : num 
    }); 
} 

...もちろん が、これは罰金最初に動作します。しかし、私は私が持っている私のスクリプトのjsに....ページが最初にロードされたときに働いていたmouseoverイベントを失いましたページがロードされる時刻ですが、リストにアイテムを追加すると、DOMは更新されますが、マウスオーバーエフェクトはもう機能しません。

いずれの考えも歓迎されています。事前に多くの感謝。

Answer 1

ダイナミックに追加されたDOMエフェクトについては、jquery .live()関数を使用する必要があります。下記のリンクからアクセスしてください

が、私はそれがあなたの問題を解決するかもしれないと思う：

api.jquery.com/live

@ishwebdev、これは、我々はすべてのDOMは、実行時間などのpageload後に追加elmentsため、実行共通の問題です、 jquery.com

から

//：あなたはコードの下のjQuery 1.4の使用を使用している場合、我々は、ライブの代わりに、定期的にバインド

を通じてイベントをバインドする必要があります

$('give your selector here').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    // do something on mouseover 
    } else { 
    // do something on mouseout 
    } 
}); 

Answer 2

@シリ：すぐれた答えをいただきありがとうございます。ここに私のショッピングカートは、ドロップダウン例です：

前：

$("#cart-items").mouseenter(function(){ 
    $('#cart-pulldown').show(); 
}); 

後：イベント処理は、まだ私はAjaxの呼び出しを介して基本的なHTMLを変更した後でも動作します

$("#cart-items").live('mouseenter', function(){ 
    $('#cart-pulldown').show(); 
}); 

.live付き。

Answer 3

jquery 1.9+で選択した回答は機能しなくなりました。代わりに

、

$(document).on("keyup", "input.assets",function(event) {... 

http://api.jquery.com/on/