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

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

 $("body").on("click", "#add_row_bur", function() { $("#bur" + o).html("; $("#tab_logic_bur").append(''); o++ }); $("body").on("click", "#delete_row_bur", function() { if (o > 1) { $("#bur" + (o - 1)).html(""); o-- } }); 

我尝试在它上面实现typeahead，但它不起作用。 我尝试使用这个答案（ 答案1 ， 答案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; } }); 

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

Answer 1

问题在于动态添加的输入元素，您需要在创建插件后对其进行初始化。

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

 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 = $("") $("#bur" + o).html($td); $("#tab_logic_bur").append(''); o++ createTypeahead($td.find('input.mybur')); }); $("body").on("click", "#delete_row_bur", function() { if (o > 1) { $("#bur" + (o - 1)).html(""); o-- } });