You should read this for more info: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F Although you're not using AJAX to introduce the content into the DOM, it's still similar to what you're doing.
On Aug 26, 7:35 am, batterhead <[email protected]> wrote: > Hi All, > > I have a page with a div that contains other divs. In the outer div, I > have links that add new divs inside. I also have a link outside the > outer div that adds more of those outer divs to the page (with an > inner div, and the same links to add more). This works on the div that > is hard coded on the page, but when I use the link to add additional > container divs the links inside there to add more inner divs does not > function. I believe it has to do with binding, but I'm not certain how > to fix this issue. Any assistance would be appreciated. > > Here is my code: > > $(document).ready(function() { > > $(".AddDisc").click( function() { > discContainerDiv = "<div class='discContainer'><div > class='trackContainer'><input type='text' class='trackInput' /></ > div><div class='trackControls'><a href='#' class='AddTrack'>(++)</a> > <a href='#' class='RemoveTrack'>(--)</a></div></div>"; > var $newDiv = > $('.discContainer:last').after(discContainerDiv); > alert($newDiv.html); > return false; > }); > > $(".RemoveDisc").click( function() { > $('.discContainer:last').remove(); > return false; > }); > > $(".AddTrack").click( function() { > trackContainerDiv = "<div class='trackContainer'><input > type='text' > class='trackInput' value='dynamic div' /></div>"; > > $(this).parent().parent().end().prev().after(trackContainerDiv); > return false; > }); > > $(".RemoveTrack").click( function() { > $(this).parent().parents(".trackDiv").end().prev().remove(); > return false; > }); > > }); > > And the HTML: > > <div class='discContainer'> > <div class='trackContainer'> > <input type='text' class='trackInput' /> > </div> > > <div class='trackControls'> > <a href='#' class='AddTrack'>(++)</a> > <a href='#' class='RemoveTrack'>(--)</a> > </div> > </div> > <hr /> > <a href="#" class="AddDisc">(++)</a> > <a href="#" class="RemoveDisc">(--)</a>
