Question

我遇到的问题是自动完成功能适用于第一个文本框，但不适用于我可以通过按钮添加的其他文本框。这是我的代码：

HTML：

<input class="button" type="button" value="+" onclick="addRow('positionen')" />
<input class="button" type="button" value="-" onclick="deleteRow('positionen')" />
<table id="positionen">
    <tr>
        <td><input type="checkbox" name="chk[]" /></td>
        <td><input class="ui-widget" type="text" name="text[]"  placeholder = "Text" /></td>
        <td><input type="text" name = "val[]" placeholder = "Val" /></td>
    </tr>
</table>

功能addRow：

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
        }
    }
}

功能deleteRow：

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Can't delete all rows");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch(e) {
        alert(e);
    }
}

自动填充代码：

$(function() {
    $(".ui-widget").focusin(function(){
        $(this).autocomplete({
            source: 'search.php'
        });
    });
});

默认情况下，页面上已有的第一个文本框可以正常使用自动完成功能。但是，当我使用按钮添加文本框时，自动完成功能不适用于此文本框。

Answer 1

加载页面时，事件绑定到html，新行不存在，只需将其绑定到创建的行，只需将其添加到addRow函数

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                    if (newcell.childNodes[0].className === 'ui-widget ui-autocomplete-input') {
                        $(newcell.childNodes).autocomplete({
                            source: 'search.php'
                        });
                    }
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
        }
    }
}

jQuery自动完成不适用于多个文本输入

1 个答案: