Javascript 使用Typeahead处理动态添加的输入元素

这是我添加行的代码，这些行也具有class='form-control mybur'：

我删除了我尝试的所有代码。同样，这将对预先创建的元素起作用：

<input type="text" name='bur_account_code[]' placeholder='Account Code' class="form-control mybur" data-provide="typeahead" required/>

---

问题是对于动态添加的输入元素，您需要在创建它们之后初始化插件

因此，一个解决方案是首先创建一个方法，该方法可以被重用来初始化插件，以获得传递的一组元素，如

var objects = [];
var map = {};

function createTypeahead($els) {
    $els.typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'proc_php/get_account_code.php',
                type: 'POST',
                dataType: 'JSON',
                async: true,
                success: function (data) {
                    objects = [];
                    map = {};
                    $.each(data, function (i, object) {
                        map[object.description] = object;
                        objects.push(object.description);
                    });
                    process(objects);
                }
            });
        },
        updater: function (item) {
            $('input.mybur').blur(function () {
                $(this).val(map[item].code);
            });

            return item;
        }
    });
}

//for the already present elements
createTypeahead($('input.mybur'));

然后在添加新元素代码中

$("body").on("click", "#add_row_bur", function() {
    var $td = $("<td><input type='text' name='bur_account_code[]' placeholder='Account Code' class='form-control mybur' data-provide='typeahead' id='account_code" + o + "'  required/><td>")
    $("#bur" + o).html($td);
    $("#tab_logic_bur").append('<tr id="bur' + (o + 1) + '"></tr>');
    o++
        createTypeahead($td.find('input.mybur'));
});
$("body").on("click", "#delete_row_bur", function() {
    if (o > 1) {
        $("#bur" + (o - 1)).html("");
        o--
    }
});

var objects = [];
var map = {};

function createTypeahead($els) {
    $els.typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'proc_php/get_account_code.php',
                type: 'POST',
                dataType: 'JSON',
                async: true,
                success: function (data) {
                    objects = [];
                    map = {};
                    $.each(data, function (i, object) {
                        map[object.description] = object;
                        objects.push(object.description);
                    });
                    process(objects);
                }
            });
        },
        updater: function (item) {
            $('input.mybur').blur(function () {
                $(this).val(map[item].code);
            });

            return item;
        }
    });
}

//for the already present elements
createTypeahead($('input.mybur'));

$("body").on("click", "#add_row_bur", function() {
    var $td = $("<td><input type='text' name='bur_account_code[]' placeholder='Account Code' class='form-control mybur' data-provide='typeahead' id='account_code" + o + "'  required/><td>")
    $("#bur" + o).html($td);
    $("#tab_logic_bur").append('<tr id="bur' + (o + 1) + '"></tr>');
    o++
        createTypeahead($td.find('input.mybur'));
});
$("body").on("click", "#delete_row_bur", function() {
    if (o > 1) {
        $("#bur" + (o - 1)).html("");
        o--
    }
});