If you have the latest version of jQuery you can try using the
"live" ( http://docs.jquery.com/Events/live ) functionality.
Change all of your click events to something like this:
$(".AddDisc").live("click", function() {...});
On Aug 26, 3:03 pm, James <james.gp....@gmail.com> wrote:
> You should read this for more
> info:http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st...
> 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 <batterh...@gmail.com> 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>- Hide quoted text -
>
> - Show quoted text -
