2

HTML テーブルに動的に行を追加しようとしています。Html テーブルには、オートコンプリート テキスト ボックスがあります。ページが読み込まれると、オートコンプリートが正常に機能し、INSERT キーをキャプチャして新しい行を挿入します。そして、それもうまく機能しています。行は問題なく追加されます。

私が直面している問題は、オートコンプリートが最初の行でのみ機能し、動的に追加された行では機能せず、新しく追加された行でもキーダウンイベントが機能しないことです。

問題はテキストボックスの 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注:すべてinputの sにsame を使用しないでください。

代わりに、次のようにプロパティをセレクター定義として#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 に答える