CODEWITHSUNDEEP
jquery
noah.lars
noah.lars

Reputation: 1

jQuery does not execute handler bound to elements that are dynamically created

I am using Jquery to dynamically load the pages of my website. Basically hiding and showing divs depending on which main menu option you click.

The problem comes with the sub menu that is on each page; the menu changes when the pages change. I empty the <ul> and append new <li>s with each page change.

I have jquery hover and click functions that go with the sub menu <li>, they only work if the page is refreshed. The functions seem to stop working because I delete the <li> and then add new ones.

I don't understand why the functions don't just go to the new <li>.

Why is this?

Upvotes: 0

Views: 74

Answers (3)

Interrobang
Interrobang

Reputation: 17434

The new, non-deprecated way to do this is by using the .on() handler, as of jQuery 1.7. If you are using this version, instead of .live(), use:

$('#menu').on('hover', 'li', function() { ... });

Upvotes: 1

Alex - AWSP
Alex - AWSP

Reputation: 11

I had the same problem. jQuery can only bind events to elements that exist when the jQuery script is loaded (page load). In order to allow the event to affect your newly created elements, you need to add .live to your code. Like this:

$(".menu").live("hover", function(){
  // your action here
});

More information on this can be found at http://api.jquery.com/live/ I believe there are some additional commands like .bind, etc that do the same or similar thing, but I have always used .live I hope that helps!

Upvotes: 1

Yaseen
Yaseen

Reputation: 1358

From what i understand your problem might be not using .live() method.. see http://api.jquery.com/live/ . when new li are added the DOM has already been loaded and so your new li tags does not qualify to be attached with .hover() or whatever event you want. This might not be exactly what you are looking for ..but must be close enough

Upvotes: 0

Related Questions