После загрузки или обновления 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 обновляется, но эффекты наведения мыши больше не работают.

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

Answer 1

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

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

api.jquery.com / live

@ ishwebdev, это обычная проблема, которую мы запускаем, для всех элементов DOM, добавляемых после загрузки страницы, таких как время выполнения, нам нужно связывать события через 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

Выбранный ответ больше не работает для jquery 1.9 +.

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

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

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

Answer 3

@ siri: спасибо за отличный ответ, у меня это сработало сразу.Вот мой пример раскрывающегося списка корзины покупок:

До:

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

После:

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

При .live обработка событий по-прежнему работает даже после изменения базовогоHTML через вызов Ajax.