Bootstrapvalidator не работает в динамических полях ввода

Question

Я использую Bootstrapvalidator для проверки формы с несколькими динамическими полями ввода. Количество отображаемых полей ввода зависит от значения выбранного comboBox (select), который затем отображает количество полей ввода через Ajax.

При изменении значения comboBox (select) в первый раз работает Bootstrapvalidator, но при следующем изменении comboBox (select) валидатор Bootstrap не работает.

Есть ли решение этой проблемы?

OnChange ComboBox (выбрать)

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

});

Функция вызывается после 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'
                            }
                        }
                    }
                }
            });
        },
    })
}

Пример динамических полей ввода, созданных из OnChange ComboBox (выбрать)

<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

Вам нужно использовать пассивную форму для привязки слушателей событий:

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