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小提琴示例：https://jsfiddle.net/igor_9000/me8bqqx2/2/

希望有所帮助！

Javascript使用自动完成功能添加带增量ID的行

1 个答案: