[js] problem z .append

[HERO]

<h1>Dodaj</h1>
<div class="testowa">
<input type="checkbox" data-option="0"> opcja 1<br>
<input type="checkbox" data-option="0"> opcja 2<br>
    <br><br>
</div>
<div id="test">
</div>

 

$('input').change(function(){
   var sprawdz = $(this).attr("data-option");
    if(sprawdz==0){
            $('#test').text("click");
        $(this).attr("data-option","1");
    }else{
        $('#test').text("");
        $(this).attr("data-option","0");
    }                               
});
$('h1').click(function(){
        $(".testowa").append('<input type="checkbox" data-option="0"> opcja dodana<br>'); 
});

 

dlaczego inputy dodane po nacisnieciu na h1 (append) nie są brane pod uwage przy tym? 

 

$('input').change(function()

 

dobrze rozumiem, ze po zaladowaniu sie strony elementy dodawane przez jquery w kod strony np.: .html()  czy .append() nie beda uwzgledniane przez wywolane pozniejszych funkcji?

a jezeli tak to da sie to jakos obejsc?

[Mion]

https://stackoverflow.com/questions/14942048/why-is-my-jquery-onchange-not-working-for-dynamically-added-selects

[HERO]

nie wiem czy dobry ale kod działa

zostawiam gdyby kogos mialo w przyszlosci naprowadzic

 

function buttons() { 
            $("#test").append('<input type="checkbox" class="ey" data-value="10">a<br>');   
            $("#test").append('<input type="checkbox" class="ey" data-value="15">b<br>');  
            $("#test").append('<input type="checkbox" class="ey" data-value="30">c<br>');               
		};
        $(document).on({
            change: function() {
                    if ($(this).is(':checked')) {
                        console.log('ok');
                    }else{
                        console.log('no');
                    }
                }
        }, '.ey');
        $(document).ready(function() { 
			buttons();
		});