views:

30

answers:

3

Hi guys, 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!

+1  A: 

DOM events aren't copied along with an element, and you are attaching the event on load. You need to attach the event to the cloned element / children when they are created.

pharalia
+3  A: 

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();
    });
strager
you can simply use `.clone(true);` but that too works. ;)
Reigel
@Reigel, I opt for `.live` because it feels lighter to me. Attaching all those handlers while cloning feels ... heavy.
strager
good point! +1, also, you might want to use `.closest()` instead of `.parents()` ;)
Reigel
Thanx guys, that worked, I was unaware that DOM events weren't copied along with the element.
@Reigel Yeah, agreed, parents() is a little excessive for this particular task, thanx!
@strager - it just came to my mind, even if you use live, it still have same effect when we talk about how light or heavy. you see, `live()` waits for new element to come then bind an event to it. I think it's the same as the cloning don't you think?
Reigel
@Reigel, `$.fn.live` attaches a handler to the root element of the DOM. The event bubbles up to the root; the event is only attached once. See the [jQuery docs for `live`](http://api.jquery.com/live/).
strager
+2  A: 

you can use .clone(true) there. It will copy also the events binded to the element. without true as the parameter, the event is not copied.

demo

Reigel