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>

Reply via email to