Question

I’ll get straight to the point, I am using jQuery to clone a div element, which has a span within it to which I have binded a click event that when triggered removes the just cloned section from the DOM, now the first section works ok, but for some reason it won’t remove the cloned sections once they are created, here is my code,

HTML:

<div id='wrapper'>
<div id="mail">
<div class="container" id="email">
    <label for="email_address">Email address: </label>
    <div>
        <input type="text" name="email_address" id="email_address"  />
        <span class="remove"></span>
    </div>
</div>
</div>
<div class="container">
    <input type="button" id="button" name="button" value="click me" />
</div>
</div>

jQuery:

$(document).ready(function() {

        $("span.remove").click(function(){
            $(this).parents("div.container").remove();
        });


        var count = 0;

        $('#button').attr('disabled','');
        $('#button').click(function(){
            count++;
            alert(count);
            var test = $('#email.container').clone().attr('id', 'email_' + count).appendTo('#mail');
            test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count);

            if(count == 3){
                $('#button').attr('disabled','disabled');
            }

        });
});

I’m probably missing something small, but I can’t seem to find the problem.

Also, I’ve been trying to find a better way of cloning the sections, and a better way of traversing the child elements when I rename them, it seems a little messy at the moment, any ideas on that?

Thanx in advance!

Answer 1

The problem is as @pharalia stated.

A solution is to use .live to bind your handlers:

    $("span.remove").live('click', function(){
        $(this).parents("div.container").remove();
    });