После загрузки или обновления jQuery ajax я теряю событие mouseover

Question

После использования .load, чтобы обновить мой div, то есть добавить элемент в мой список, я использовал firebug и увидел, что список обновлен. Тем не менее, я потерял событие, который работал курсора, находящегося, когда страница загружается первый .... в моем сценарии JS У меня есть:

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

... Конечно, это работает отлично первый когда страница загружается, но когда я добавляю элемент в список, DOM обновляется, но эффекты mouseover больше не работают.

Любые мысли более чем приветствуются. Спасибо заранее.

Answer 1

Для динамических добавлений DOM вам необходимо использовать функцию jquery .live().

Пожалуйста, перейдите по ссылке ниже, я думаю, что может решить вашу проблему:

api.jquery.com/live

@ishwebdev, это общая проблема, мы бежим, для всех DOM элементов, входящих добавили после PageLoad, как время выполнения, мы должны связать события через живой вместо регулярного затруднительное

Если вы используете 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+.

Вместо этого используйте «на» событие, как

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

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