Javascript 将jquery自动完成添加到页面加载后添加的字段

我使用jQueryUIAutoComplete调用指向DB的链接来填充表单下拉列表。 这很好，但我还有一个函数，可以使用相同的名称/类向表单中添加更多表单字段，我想对这些字段应用autocomplete函数

这是否可能，以及如何为新表单字段重新调用autocomplete函数

我的javascript代码如下

var count = 0;

$(function(){

$('input.books').each(function() {
var autoCompelteElement = this;
var formElementName = $(this).attr('name');
var hiddenElementID  = formElementName + '_autocomplete_hidden';
/* change name of orig input */
$(this).attr('name', formElementName + '_autocomplete_label');
/* create new hidden input with name of orig input */
$(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
$(this).autocomplete({source:'search.php', minLength: 3,
    select: function(event, ui) {
        var selectedObj = ui.item;
        $(autoCompelteElement).val(selectedObj.label);
        $('#'+hiddenElementID).val(selectedObj.value);
        return false;
    }
});
});


$('p#add_field').click(function(){
        count += 1;
            $('#books').append(
            '<tr>'
            + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
            + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
            + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
            + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
            + '</tr>'
            + '<strong>Link #' + count + '</strong><br />' );
        });



});

---

在这些新字段上调用autocomplete方法

var newRow = '<tr>'
        + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
        + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
        + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
        + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
        + '</tr>';
        //+ '<strong>Link #' + count + '</strong><br />';  <--this line can not be added to a table like this! 
$('#books tbody').append(newRow);
newRow.autocomplete( ..options..);   

---

不能像那样将强元素行追加到表中。浏览器正在修复它，但这是非常糟糕的做法。如果需要，请将其附加到元素之后。

您可以使用jQuery来构建HTML，而不是使用字符串来构建HTML，同时附加autocomplete：

$('p#add_field').click(function(){
    count += 1;
    var tr = $(document.createElement('tr'));
    $.forEach(['BookName_', 'Length_', 'ISBN_', 'Year_'], function(key){
        var td = $(document.createElement('td'));
        var input = $(document.createElement('input')).attr('type', 'text')
                                                      .attr('name', key+count)
                                                      .attr('id', key+count)
                                                      .autocomplete(// AUTOCOMPLETE HERE);
        var strong = $(document.createElement('strong')).html('Link #'+count);
        td.append(input, strong, $(document.createElement('br'));
        tr.append(td);
    });
    $('#books').append(tr);
});

---

这样，您就可以使用jQuery函数中包装的document.createElement，这样您就可以链接其余的jQuery方法来构建这些元素，同时附加autocomplete，然后使用append构建元素，并根据需要附加它们。

我实际上并不需要那个强元素，只是为了测试目的，现在我正在学习本教程：感谢您的两个回复，但是如何将自动完成代码添加到其中一个，我所做的一切都会阻止页面上的所有javascript工作。。事实上，如果我删除以下行：.autocomplete//autocomplete HERE；加上,；to.attr'id'，key+count so.attr'id'，key+count；页面上的javascript仍然不起作用/没有添加字段，因为addfield链接不可单击，所以是否存在错误或我遗漏了什么？我必须查看您的html，以了解为什么带有id add_字段的段落标记不可单击