Question

我创建了一个自动完成的文本框，当我们动态添加行时，它会在普通的textboxbot中顺利运行，自动完成文本框无法正常工作。

我的自动填充文本框的Javascript代码是....

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

        <script type="text/javascript">
                $(document).ready(function(){
                    $(".p").autocomplete({
                        source:'autocomplete1.php',
                        minLength:1
                    });
                });
        </script>

我的动态添加行的Javascript代码是....

<SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[1].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                }
            }
        }

        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 <= 2) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>

动态添加行的HTML代码是....

<TD><INPUT type="checkbox" name="chk[]"/></TD>
          <td><input type="text" name="p[]" id="p" class="p" /></td>
          <td><input type="text" name="b[]" id="b" class="b" /></td>
          <td><input type="text" name="m[]" id="m"  class="m" /></td>
           <td><input type="text" name="qy[]" id="qy"/></td>
          <td><input type="text" name="dp[]" class="pr"/></td>
          <td><input type="text" name="q[]" class="q"/></td>

          <td><input name="txt[]" type="text" class="txt" id="txt" /></td>

请帮助......

Answer 1

它无效，因为您只在autocomplete上应用$(document).ready() JQuery一次。
在动态添加行之后，还应该再次应用autocomplete JQuery。像这样：

function addRow(tableID) {
    ...
    $(".p").autocomplete({
        source:'autocomplete1.php',
        minLength:1
    });
}

Answer 2

自动完成功能未动态创建您动态创建的新元素，因为它是在您调用该函数后创建的。所以你需要做的是每次添加行之后调用jQuery自动完成函数（在函数addRow（）的末尾）。

function addRow(tableID) {
   //Your codes
    $(".p").autocomplete({
        source:'autocomplete1.php',
        minLength:1
    });
}

使用javascript动态添加行无法使用自动完成文本框

2 个答案: