CODEWITHSUNDEEP
javascriptjquery
Sowmya
Sowmya

Reputation: 26969

Jquery clone and appendto for parent element

I have 3 radio buttons which open up the individual divs. All the 3 divs has input boxes which can be added by clicking on the add button next to the input box.

Problem in this now is,

Input boxes should be adding only in the respective radio checked div but now it is aplying for all the 3 div input boxes. If you check on the any one radio button and click on the add button next to input, add few input boxes then go to another radio button and you can see the same action there also which should not actually right.

Here is the code and the fiddle

$filtr = $('.filtr');

        $filtr.on('click', '.add', function(){
            $(this).closest('.loop').clone().appendTo( $('.test') );
        });

        $filtr.on('click', '.del', function(){
           $(this).closest('.loop').remove();
        });

        $('#1lev, #2lev, #3lev').hide();

DEMO

Upvotes: 1

Views: 985

Answers (2)

BeNdErR
BeNdErR

Reputation: 17929

have a look here: http://jsfiddle.net/VMBtC/2/

I changed this:

$filtr.on('click', '.add', function(){
    $(this).closest('.loop').clone().appendTo( $('.test') );
});

to this:

$filtr.on('click', '.add', function(){
    $(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
});

hope it helps

EDIT

radio buttons improvement: check here -> http://jsfiddle.net/VMBtC/3/

JS

$(":radio").click(function(){
     $(".test").hide();
     var show = $(this).attr("data-show");
     $("#"+show).show(300)
});

HTML

<label><input name="1 Level" type="radio" value="0" data-show="1lev" />1 Level</label>
<label><input name="1 Level" type="radio" value="1" data-show="2lev" />2 Level</label>
<label><input name="1 Level" type="radio" value="2" data-show="3lev" />3 Level</label>

Upvotes: 4

mdup
mdup

Reputation: 8509

Use $(this).closest('.loop').clone().appendTo( $(this).closest('.test') );, otherwise you'd be adding to every .test element.

Upvotes: 2

Related Questions