jQuery - duplicate ajax queries

Question

Why there is a problem with select options?

how to replicate:

1. click on add button

2. Try to change first select

   a. after the first change, nothing happens

   b. after second change, it runs ajax query

   c. after third change, it runs twice ajax query

   d. the fourth change, fires the same three questions...

What is wrong? Where I made mistake?

Here is jsfiddle

<button type="button" class="btn btn-primary btn-sm" id='ql_add_case_schema'><i class="fa fa-plus-square"></i> Add case</button>

<div id='ql_div_cases'></div>

$("#ql_add_case_schema").on("click", function () {
    var select  ='<div>';

            select +='<select class="skill" name="skill">';
                select +='<option value="" selected>--</option>';
                select +='<option value="case1">Case 1</option>';
                select +='<option value="case2">Case2</option>';
            select +='</select>';

            select +='<select class="process" name="process">';
                select +='<option value="">--</option>';
            select +='</select>';

            select +='<select class="reason" name="reason">';
                select +='<option value="">--</option>';
            select +='</select>';


            select +='<select class="action" name="action">';
                select +='<option value="">--</option>';
            select +='</select>';

        select +='</div>';

    $('#ql_div_cases').append(select);
});

/* For multiple jquery.chained.js */
$('#ql_div_cases').delegate('select', 'change', function(){
        //console.log( 'click');

        $(".process").each(function() {
            $(this).remoteChained($(".skill", $(this).parent()), "pytania/getCases");
        });

        $(".reason").each(function() {
            $(this).remoteChained([
                $(".skill", $(this).parent()),
                $(".process", $(this).parent())
            ], "pytania/getCases");
        });

        $(".action").each(function() {
            $(this).remoteChained([
                $(".skill", $(this).parent()),
                $(".reason", $(this).parent()),
                $(".process", $(this).parent())
            ], "pytania/getCases");
        });

});

Answer 1

The problem is you only execute the chain function after the first selection rather than upon creation, but then after the second selection you chain it again, and again and again for a third selection. You should chain at least the first item upon creation. I'm not sure if you can pass empty values back but if you can something like the following works:

$("#ql_add_case_schema").on("click", function () {
    var select = '<div>';

    select += '<select class="skill" name="skill">';
    select += '<option value="" selected>--</option>';
    select += '<option value="case1">Case 1</option>';
    select += '<option value="case2">Case2</option>';
    select += '</select>';

    select += '<select class="process" name="process">';
    select += '<option value="" selected>--</option>';
    select += '<option value="case1">Case 1</option>';
    select += '<option value="case2">Case2</option>';
    select += '</select>';

    select += '<select class="reason" name="reason">';
    select += '<option value="" selected>--</option>';
    select += '<option value="case1">Case 1</option>';
    select += '<option value="case2">Case2</option>';
    select += '</select>';


    select += '<select class="action" name="action">';
    select += '<option value="" selected>--</option>';
    select += '<option value="case1">Case 1</option>';
    select += '<option value="case2">Case2</option>';
    select += '</select>';

    select += '</div>';

    $('#ql_div_cases').append(select);

    $(".action").each(function () {
        $(this).remoteChained([
        $(".skill", $(this).parent()),
        $(".process", $(this).parent()),
        $(".reason", $(this).parent()),
        $(".action", $(this).parent())], "pytania/getCases");
    });
});

Result:

GET pytania/getCases?skill=case1&process=&reason=&action=

jsfiddle: http://jsfiddle.net/X3z4p/