在HTML表中动态添加行的问题

Question

我试图将行动态地添加到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>

Answer 1

当您动态附加input时，您需要委托事件处理程序（也称为直播事件）。所以你应该尝试下面的内容：

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

并且还应该使用#txtsn的委托，如下所示：

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

注意：您不应对所有id使用相同的input。

---

您可以使用#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 start selector