After jQuery ajax load or update, I lose the mouseover event

Question

After using .load to update my div, that is add item to my list, I used firebug and saw that the list was updated. However, I lost the mouseover event that worked when the page first loaded. In my script js 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 fine the first time the page is loaded, but when I add item to the list, DOM is update but mouseover effects don't work any more.

Any thoughts are more than welcomed.

Answer 1

For DOM elments added dynimically you need to use the jquery .live() function.

Please go through the below link, I think that might fix your problem:

api.jquery.com/live

@ishwebdev, this is common problem we run , for all the DOM elments added after pageload like run time, we need to bind the events through live instead of regular bind

If you are using jquery 1.4 use below code:

// from jquery.com

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