Why does jQuery change only fires once inside load function?

Question

I am having a div what loads a form, and i would like to to load the form url with the data when it it changed, but it only fires once

My code

$( "#calculator-wrapper" ).load( "mysite.com/new2/kalkulator/index.php", function(data) {
    $('#calculator').change(function(){
        var formData = $(this).serialize();    
        $("#calculator-wrapper").load("mysite.com/new2/kalkulator/index.php?"+formData+'&sub=Sz%C3%A1mol');
    });    
});

It works, but only once, i am a beginner so im stuck for a second, i tried to use bind() and on() but that does not work either.

Can anybody give me a hint?

Answer 1

You need event delegation for change event.try this:

$( "#calculator-wrapper" ).load( "mysite.com/new2/kalkulator/index.php", function(data) {
$(document).on("change",'#calculator',function(){
    var formData = $(this).serialize();
    $( "#calculator-wrapper" ).load("mysite.com/new2/kalkulator/index.php?"+formData+'&sub=Sz%C3%A1mol');
});});

Answer 2

Try

$(document).on("change","#calculator",function(){
    var formData = $(this).serialize();    
    $("#calculator-wrapper").load("mysite.com/new2/kalkulator/index.php?"+formData+'&sub=Sz%C3%A1mol');
}); 

Because you need delegation for dynamically created objects.