Javascript通过自动完成添加具有增量ID的行

Question

我有一个添加新行脚本，它克隆整个“tr”，增加 id + 1，然后清除值。一切都很好，但目标是让其中一个文本输入与 jquery 自动完成功能相关联。

Javascript：

$("#add-row").click(function(){
    var lastRow = $('#findings-table tbody>tr:last');
    var cloned = lastRow.clone();
    cloned.find('input, select, textarea').each(function () {
        var id = $(this).attr('id');
        var regIdMatch = /^(.+)(\d+)$/; 
        var aIdParts = id.match(regIdMatch);
        var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);

        $(this).attr('id', newId);
    });
    cloned.find("input[type='text']").val('');
    cloned.find("textarea").val('');
    cloned.insertAfter(lastRow);        
});


$(function() {
         $("#code1").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code1').val(ui.item.id);
                //$('#descrip2').val(ui.item.notes);
            }
        });

        $("#code2").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code2').val(ui.item.id);
            }
        });

        $("#code3").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code3').val(ui.item.id);
            }
        });

    });

HTML：

<table id="findings-table" class="table table-striped table-hover">
    <tr>
         <th>Code</th>
         <th>Description</th>
    </tr>
    <tbody>
    <tr>
         <td><input style="width: 70px;" type="text" id="code1" name="code[]" class="form-control"></td>
         <td><textarea cols="30" rows="3" id="descrip1" name="descrip[]"></textarea></td>
    </tr>
    </tbody>
</table>

当我点击添加一行时，它会正确复制，然后我得到 id="code2" 然后 id="code3"，等等。

我的问题是 code2 id 和 code3 id 应该填充来自 search_ajax.php 的自动完成下拉信息。 code1 id 工作正常。我假设它与页面加载时已经存在的 code1 id 有关，但添加的行不是？有什么想法吗？

Answer 1

您可以在 $("#add-row").click() 函数的末尾动态添加绑定。像这样的东西应该可以工作：

$("#add-row").click(function(){
    var lastRow = $('#findings-table tbody>tr:last');
    var cloned = lastRow.clone();
    cloned.find('input, select, textarea').each(function () {
        var id = $(this).attr('id');
        var regIdMatch = /^(.+)(\d+)$/; 
        var aIdParts = id.match(regIdMatch);
        index = (parseInt(aIdParts[2], 10) + 1);
        var newId = aIdParts[1] + index;
        $(this).attr('id', newId);        
    });
    cloned.find("input[type='text']").val('');
    cloned.find("textarea").val('');
    cloned.insertAfter(lastRow);    

    addBinding(index);


});



function addBinding(index) {
    $("#code" + index).autocomplete({
        source: "/search_ajax.php",
        minLength: 1,
        select: function(event, ui) {
            $(this).val(ui.item.id);
        }
    });
}


addBinding(1); //for the element that already exsists

这是一个 JS Fiddle 示例：https://jsfiddle.net/igor_9000/me8bqqx2/2/

希望有帮助！