CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Brian
Brian

Reputation: 294

After a ajax success, The Javascript doesn't work

After I send a Ajax request and it's successful. The jquery.hover() doesn't work with new part of page.

Is there way to reload the script without reloading the div via another ajax request, so that it works with the new part of the page.

Upvotes: 0

Views: 234

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388326

You can't use hover() on dynamic elements as it is not an event handler, you need to use delegated event handling for mouseenter and mouseleave events

.hover() is a short hand for using mouseenter and mouseleave, but it will attach the handlers to only those elements which are present in the dom at the time of execution

ex

$(document).on('mouseenter', '<selector>', function(){
    //do something
}).on('mouseleave', '<selector>', function(){
})

Upvotes: 2

Coder
Coder

Reputation: 7076

Since the new part is dynamically added, jquery hover won't work with that.

Try this

$(document).on('mouseenter', 'selector', function(){
        // Code to perform on mouse enter
}).on('mouseleave', 'selector', function(){
       // code to perform on mouse leave (This is optional)
})

Upvotes: 0

Sandeep.sarkar
Sandeep.sarkar

Reputation: 130

You might have added the hover action on $(document).ready(); As the new page content wasnt there when page load, you have to rebind the hover action after the new content is updated via ajax.

Upvotes: 0

Related Questions