jQuery自动完成dynamic创build的input

我有一个使用jQuery自动完成与dynamic创buildinput（再次创build与jQuery）的问题。 我无法自动完成绑定到新的input。

自动完成

$("#description").autocomplete({ source: function(request, response) { $.ajax({ url: "../../works_search", dataType: "json", type: "post", data: { maxRows: 15, term: request.term }, success: function(data) { response($.map(data.works, function(item) { return { label: item.description, value: item.description } })) } }) }, minLength: 2, }); 

带有input的新表格行

 var i = 1; var $table = $("#works"); var $tableBody = $("tbody",$table); $('a#add').click(function() { var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>'); $tableBody.append(newtr); i++; }); 

我知道这个问题是由于页面加载后创build的内容，但我不知道如何解决它。 我已经阅读了几个相关的问题，并且遇到了jQuery live方法，但是我仍然处于困境！

任何build议？

Answer 1

首先，您需要存储.autocomplete()的选项， .autocomplete()所示：

 var autocomp_opt={ source: function(request, response) { $.ajax({ url: "../../works_search", dataType: "json", type: "post", data: { maxRows: 15, term: request.term }, success: function(data) { response($.map(data.works, function(item) { return { label: item.description, value: item.description } })) } }) }, minLength: 2, }; 

使用class属性来标记input更为简洁，如：

 <input type="text" class="description" name="item[' + i + '][works_description]" /> 

最后，当您创build一个新的表格行时，使用已存储在autocomp_opt的选项来应用.autocomplete() ：

 $('a#add').click(function() { var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>'); $('.description', newtr).autocomplete(autocomp_opt); $tableBody.append(newtr); i++; }); 

Answer 2

我发现我需要在append之后添加自动完成function，所以：

  $tableBody.append(newtr); $('.description', newtr).autocomplete(autocomp_opt);