无法为带有文本字段的JQuery生成的行绑定Twitter Bootstrap typeahead

问题描述

我有一个只有一行的表，这些行的第一个单元格中有一个文本字段，并且在单独的js文件中将文本字段绑定到twitter bootstrap typeahead.但是用户可以使用添加按钮创建行，并且第一行将被克隆以创建其他行.现在，我希望输入的内容在这些克隆的文本字段中能正常工作，但是不能，并且控制台中不会显示任何错误.克隆的文本字段具有与原始文本字段相同的ID和名称.知道为什么会这样吗?以及有关如何处理它的任何建议?

I have a table with a single row, the rows has a text field in its first cell and the text field in bind to twitter bootstrap typeahead in a separate js file. But users can create rows using the add button and the first row is cloned to create additional rows. Now I expected the typeahead to work just fine in these cloned text fields but it doesn't and no error is displayed in the console. The cloned text fields have the same id and name to the original text field. Any idea why this might be? and any suggestions on how to handle it?

推荐答案

我猜想不是在动态创建/克隆的行上启动 .typeahead().您可以在添加行时触发事件，并使用jquery .on()...附加预输入.

I'd guess that .typeahead() is not being initiated on the dynamically created/cloned rows. You can trigger an event when the row is added and attach the typeahead using jquery .on()...

$('#btnAddRow').click(function(){
    var newRow = $('<div class="row"><input type="text" placeholder="Start typing.." class="typeahead" data-items="3"></div>');
    newRow.insertBefore('#addRow');
    $('.typeahead').trigger('added');

});

$('.typeahead').on('added',function(){
    $('.typeahead').typeahead(typeaheadSettings);
});

这是一个可行的示例

这篇关于无法为带有文本字段的JQuery生成的行绑定Twitter Bootstrap typeahead的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！