Bootstrapvalidator does not work in dynamic input fields

Question

I use Bootstrapvalidator to validate a form that has a number of dynamic input fields. The number of input fields displayed depends on the value of the selected comboBox (select), which then displays a number of input fields through Ajax.

At the change of comboBox (select) value the first time Bootstrapvalidator works, but at the next comboBox (select) change, Bootstrap validator does not work.

Is there a solution to overcome this problem?

OnChange ComboBox (select)

$('#jenis_penawaran').on('change', function () {
    var jenis_penawaran = this.value;
    set_bobot_kriteria(jenis_penawaran);

});

Function called after OnChange

function set_bobot_kriteria(par) {
    var data = {
        'jenis_penawaran': par,
        'dm': '3',
    };
    $.ajax({
        type: 'POST',
        url: "<?php echo site_url('user/set_bobot'); ?>",
        data: data,
        success: function (result) {

            $('#bobot-kriteria').html(result); //dynamic input field depend on Combobox (select) change
            $('#form_update_bobot').bootstrapValidator({ //The validator does not work after OnChange the second time and after
                fields: {
                    "bobot_kriteria[]": {
                        validators: {
                            notEmpty: {
                                message: 'Bobot tidak boleh kosong'
                            },
                            numeric: {
                                message: 'Bobot harus berupa angka'
                            }
                        }
                    }
                }
            });
        },
    })
}

Example of dynamic input fields generated from OnChange ComboBox (select)

<div class="form-group row m-b-15">
    <label class="col-form-label col-md-3">Nama Kriteria</label>
    <div class="col-md-9">
        <div class="input-group">
            <div class="input-group-append"><span class="input-group-text"><i class="ion-ios-speedometer"></i></span></div>
            <input type="hidden" name="id_bobot_kriteria[]" value="' . $row->id_kriteria . '"/>
            <input type="text" class="form-control" name="bobot_kriteria[]" id="id_bobot_kriteria" />
        </div>
    </div><
</div>
<div class="form-group row m-b-15">
    <label class="col-form-label col-md-3">Nama Kriteria</label>
    <div class="col-md-9">
        <div class="input-group">
            <div class="input-group-append"><span class="input-group-text"><i class="ion-ios-speedometer"></i></span></div>
            <input type="hidden" name="id_bobot_kriteria[]" value="' . $row->id_kriteria . '"/>
            <input type="text" class="form-control" name="bobot_kriteria[]" id="id_bobot_kriteria" />
        </div>
    </div><
</div>

Answer 1

You need to use a passive form for binding event listeners:

$(document).on('change', '#jenis_penawaran', function () {
    var jenis_penawaran = this.value;
    set_bobot_kriteria(jenis_penawaran);
});