Question

for example if I click on the add+ 9 times, I’ll have 10 boxes. but after that, Only if A click the last box, it will hide. (I want hiding the specific box by clicking on that box). by the way after click (and desappering) the last box, the other boxe wont hide in any way
whats my problem?

$(document).ready(function(){
    $("#add").click(function(){
        $(".test:last").clone().insertAfter(this);
    })
    $(".test").click(function(){
        $(this).hide("slow");
    })
})

<div id="add">ADD+</div>
<div class="test" style="border:1px solid black; width:70px; height:25px;">
    box
</div>

Answer 1

Because you’re only hooking up the one that exists when the document loads. Change

$(".test").click(function(){
    $(this).hide("slow");
})

to

$(".test").live('click', function(){
    $(this).hide("slow");
});

click is for hooking up events to elements that already exist. Using live, you can be more speculative and say “hook up this event for any that already exist, and any I add later that match this selector.” There’s also delegate which can be useful if you want the functionality of live, but one for descendants of a particular element.

Details:

• click
• live
• delegate