problem in understanding JQuery selectors

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>

T.J. Crowder · Accepted Answer · 2011-02-04 17:22:46Z

4

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:

answered Feb 4, 2011 at 17:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2011-02-04 17:32:15Z

3

Use .clone(true) instead of just .clone() to copy the event handlers as well.

Example: http://jsfiddle.net/hQ5Qc/

I'd also add that you may want to change the selector from this:

$(".test:last")

to this:

$(".test:visible:last")

so if you hide the last box, you're not cloning one that was already hidden.

Example: http://jsfiddle.net/hQ5Qc/2/

edited Feb 4, 2011 at 17:32

answered Feb 4, 2011 at 17:23

user113716

323k64 gold badges454 silver badges441 bronze badges

1 Comment

T.J. Crowder Over a year ago

That's another way to go, yeah.

Kris Ivanov · Accepted Answer · 2011-02-04 17:33:41Z

0

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

    $("#add").click(function(){
         $(".test:visible:last").clone(true).insertAfter(this);
    })
})

added :visible per comment suggestion

edited Feb 4, 2011 at 17:33

answered Feb 4, 2011 at 17:26

Kris Ivanov

10.6k2 gold badges26 silver badges36 bronze badges

1 Comment

Kris Ivanov Over a year ago

not different, sometimes you will get many answers to easy question that are all the same in functionality

Collectives™ on Stack Overflow

problem in understanding JQuery selectors

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related