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

【问题标题】：Cannot work autocomplete textbox in dynamically add row using javascript无法使用javascript动态添加行中的自动完成文本框
【发布时间】：2014-03-24 19:38:02
【问题描述】：

我创建了一个自动完成文本框，当我们动态添加行时自动完成文本框无法正常工作。

我的自动完成文本框的 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>

请帮忙...

【问题讨论】：

标签： javascript php jquery html autocomplete

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：