使用Ajax创建元素时填充数据

Question

我在用户点击按钮时创建了一个动态元素。元素是Combobox。 Combobox中的数据是从数据库中获取的。我用Ajax把它拿走了。

但是，将数据放入动态Combobox时出现问题。

这是我的代码：

$(document).ready(function(){
        var berkasNumber = 5;

        $("#tambah_field_berkas").click(function() {
            var strField = "<div class='form-inline'><div class='form-group'><select name='jenis_berkas[]' id='berkas' class='form-control'><option value='' class='form-control'>Pilih Berkas</option></select></div><div class='form-group'><input type='text' name='biaya[]' class='form-control' placeholder='Biaya' /></div><div class='form-group'><input type='text' name='lokasi[]' class='form-control' placeholder='Lokasi' /></div>&nbsp;&nbsp;<div class='form-group'><a onclick='hapus()' id='remove_field_berkas'> <span class='glyphicon glyphicon-remove red' style='cursor:pointer;' title='Remove'></span></a></div></div>";

            if (counter <= berkasNumber) {
                // Populate combobox value
                $.ajax({
                    url : 'helper_berkas.php',
                    dataType : 'json',
                    success : function(data) {
                        for(var i = 0; i < data.length; i++) {
                            //console.log(data[i].nama_berkas);
                            $("#berkas").append('<option>'+ data[i].nama_berkas +'</option>')
                        }
                    }
                });

                $("#field-berkas").append(strField);
            }

            counter++;
        });
    });

在上面的代码中，只添加第二个Combobox上的现有数据（第二次点击触发器）。

任何解决方案？非常感谢你。