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

Question

这是我添加行的代码，其中也有 class='form-control mybur':

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

我尝试在其上实施提前输入，但它不起作用。我尝试使用这个答案（answer 1, answer 2），但仍然失败。

这是我的代码：

var objects = [];
var map = {};
$('input.mybur').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;
    }
});

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

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

Answer 1

问题是动态添加的input元素，创建后需要初始化插件

所以一个解决方案是首先创建一个方法，该方法可以重复使用来为一组传递的元素初始化插件，例如

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--
    }
});

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

Working on dynamically added input elements with Typeahead

javascript

jquery

bootstrap-typeahead