After loading or updating jQuery ajax, I lose the mouseover event

Question

After using .loadto update my div, this is to add an item to my list, I used firebug and saw that the list was updated. However, I lost the mouseover event, which triggered the first time the page was loaded .... in my js script I have:

// 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
    });
}

... Of course, this works great the first time the page loads, but when I add an item to the list, the DOM is updated, but the mouseover effects no longer work.

Any thoughts are more than welcome. Thank you very much in advance.

Answer 1

DOM jquery .live().

, , , :

api.jquery.com/live

@ishwebdev, , , DOM, pageload, , live bind

jquery 1.4, :

// jquery.com

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

Answer 2

@siri: , . :

:

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

:

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

.live - , HTML Ajax.

Answer 3

jquery 1.9 +.

"on",

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

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