javascript - jQuery ajax 加载或更新后，我丢失了鼠标悬停事件

Question

在使用 .load 更新我的 div 后，即将项目添加到我的列表中，我使用 firebug 并看到列表已更新。但是，我丢失了页面首次加载时有效的 mouseover 事件。在我的脚本 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元素，如运行时，我们需要通过实时而不是常规绑定(bind)来绑定(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
  }
});