javascript - After jQuery ajax load or update, I lose the mouseover event - Stack Overflow

admin管理员组

文章数量:1426243

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 weled.

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 weled.

• javascript
• jquery
• ajax
• jquery-events

Share Improve this question Follow edited May 15, 2022 at 17:10 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 6, 2010 at 6:01 ishwebdevishwebdev 5111 silver badge22 bronze badges 1

• can you format the code by selecting your code and use a cntr + K , mostly your issue might be the on i mentioned, try to use jquery live/// – kobe Commented Dec 6, 2010 at 6:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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./live

@ishwebdev, this is mon 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.

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

@siri: thanks for the excellent answer, it worked for me right away. Here's my shopping cart dropdown example:

Before:

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

After:

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

With .live the event handling still works even after I change the underlying HTML via an Ajax call.

The selected answer no longer works for jquery 1.9+.

Instead, use "on" event, like

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

http://api.jquery./on/

本文标签： javascriptAfter jQuery ajax load or updateI lose the mouseover eventStack Overflow