JAVASCRIPT EVENT TEST

by mreis1

HTML

<div class="wrapper1">
    <a href="#" data-empty>Empty checkbox parent</a> <br>
    <a href="#" data-add>Add checkbox to parent</a> <br>
    <div class="parent">
        <input type="checkbox"/>
    </div>    
</div>

<div class="wrapper2">
    <a href="#" data-empty>Empty checkbox parent</a> <br>
    <a href="#" data-add>Add checkbox to parent</a> <br>
    <div class="parent">
        <input type="checkbox"/>
    </div>    
</div>

CSS

.wrapper1{margin-bottom:200px;}

JavaScript

var $parent1 = $('.wrapper1 div.parent'),
    $checkbox1 = $('.wrapper1 input'),
    $add1 = $('.wrapper1 [data-add]'),
    $remove1 = $('.wrapper1 [data-empty]');

var $parent2 = $('.wrapper2 div.parent'),
    $checkbox2 = $('.wrapper2 input'),
    $add2 = $('.wrapper2 [data-add]'),
    $remove2 = $('.wrapper2 [data-empty]');

$remove1.on('click', function(){
    $parent1.html('');
    $checkbox1.on('click', function(){ 
       alert("clicked");
    })
})

$add1.on('click', function(){
    $parent1.append($checkbox1);
    
})

$checkbox1.on('click', function(){ 
   alert("clicked");
})