You have two options You can wrap your event binding all in its own function, and then call that function again each time new elements are added
Or there is also a plugin designed to handle this for you http://jquery.com/plugins/project/behavior http://jquery.com/plugins/project/behavior hstang2833 wrote: > > I am just started using jQuery to simplify my JavaScript programming but I > am running into this problem where my event handlers are not binding > properly to my event handler when I am creating these links dynamically > using jquery. I am sure this is a common problem but I just need to be > pushed to the right direction to fix this. Could someone lend a hand, > please? > > Below is a simple example what I'm trying to do. When the page loads, > there is a link called Foo and will say "hi" when clicked. There's > another link below it that adds more Foo links BUT those newly added Foo > links will no longer say "hi" anymore when you click on them. How do I > make them say "hi" again? I tried rebinding it but it doesn't work. > > > <body id="body"> > # Foo > # Add Link > </body> > > > $(document).ready(function() { > $('#addLink').click(function() { > var html = " # Foo ; > $('#body').append(html); > }); > } > > $(document).ready(function() { > $('.foo').click(function() { > alert("hi"); > }); > } > > -- View this message in context: http://www.nabble.com/event-handlers-lost-when-adding-and-removing-links-dynamically-tf4268860s15494.html#a12149797 Sent from the JQuery mailing list archive at Nabble.com.
