2

我试图将行动态添加到 HTML 表中。Html 表格有一个自动完成的文本框。加载页面时，自动完成工作正常，我捕获 INSERT 键以插入新行。它的工作也很好。添加行没有任何问题。

我面临的问题是，自动完成功能仅在第一行有效，而在动态添加的行中无效，keydown 事件在新添加的行中也无效。

我认为问题出在文本框中的 id/name 上。非常感谢您的帮助。

我的脚本

     <script>


$(function() {
   var availableTags = new Array();
  <?php
     if($g_sql)
     {
         $i = 0;
         while ($result = mysql_fetch_array($g_sql))
         {
             ?>
             availableTags[<?php echo $i;?>] = "<?php echo $result['GroupName'];?>";
             <?php
             $i++;
         }
     }
 ?> 
     $( "#txtmatg" ).autocomplete({
       source: availableTags
     });
 });
 $("#txtsn").keydown(function(e) {
    if(e.which == 45)
    {
        addRow('mattable');
    }
 }); 
</script>
<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[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;
       }
     }
 }
     </SCRIPT>

我的 HTML 代码是

   <div class="ui-widget">
      <table id="mattable">
           <tr>
              <td><input type="text" name="txtmatg[]" id="txtmatg" class="input"></td>
              <td><input type="text" name="txtmat[]" id="txtmat" class="input"></td>
              <td><input type="text" name="txtsn[]" id="txtsn" class="input"></td>
          </tr>
      </table>
   </div>
4

1 回答 1

3

当您input动态附加时，您需要委托事件处理程序（又名实时事件）。所以你应该尝试如下：

$('#mattable').on("keydown.autocomplete","#txtmatg", function() {
    source: availableTags
});

并且还应该使用委托进行#txtsn如下操作：

   $('#mattable').on("keyup","#txtsn", function(e) {
       if(e.which == 45) {
          addRow('mattable');
       }
    });

注意：你不应该id对所有inputs 使用相同的。

而不是#txtmatg您可以使用name属性作为选择器定义，如下所示：

$('#mattable').on("keydown.autocomplete","[name^=txtmatg]", function() {
    source: availableTags
});

并用于如下#txtsn用途name：

   $('#mattable').on("keyup","[name^=txtsn]", function(e) {
       if(e.which == 45) {
          addRow('mattable');
       }
    });

在这里，[name^=tstmatg]将针对所有输入，name以此类推tstmatg。

阅读有关jQuery 开始选择器的更多信息

于 2012-06-15T08:00:56.423 回答