在添加選擇下拉菜單選項后無法完全正常運行的情況下，動態添加刪除行

Question

在沒有<select>和<option>下拉菜單之前，此方法工作正常，但是嘗試向其中添加一個下拉菜單，它無法正常工作（請參見下面的小提琴或更多詳細信息）。 在控制台中看不到任何錯誤。

JSFiddle（正在運行）： https ://jsfiddle.net/zxqrpLvo/

JSFiddle（不起作用*）： https ://jsfiddle.net/a2a4584z/1/

工作（不選擇下拉菜單）：

的HTML

<div class="row">
   <div class="col-md-3">
   </div>
   <div class="col-md-6" id="inputform">
      <form id="inventorytoadd">
         <table class="table table-striped table-responsive table-hover" id="tab_logic">
            <thead>
               <tr >
                  <th class="text-center" width="10%">
                     #
                  </th>
                  <th class="text-center" width="68%">
                     SKU
                  </th>
                  <th class="text-center" width="22%">
                     Quantity
                  </th>
               </tr>
            </thead>
            <tbody>
               <tr id='addi0'>
                  <td class="text-center numcell" width="10%">
                     1
                  </td>
                  <td width="68%">
                     <input type="text" name='sku[]' id="sku0"  placeholder='SKU' class="form-control"/>
                  </td>
                  <td width="22%">
                     <input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
                  </td>
               </tr>
               <tr id='addi1'></tr>
            </tbody>
         </table>
      </form>
   </div>
   <div class="col-md-3">
   </div>
</div>
<div class="row">
   <div class="col-md-3">
   </div>
   <div class="col-md-6 add-delete-rows" id="inventory-add">
      <button id="add_row" class="btn btn-primary pull-left">Add Row</button><button id='delete_row' class="pull-right btn btn-danger">Delete Row</button>
   </div>
   <div class="col-md-3">
   </div>
</div>

以及隨附的jQuery代碼

jQuery / JavaScript

   $(document).ready(function() {
       var i = 1;
       $("#add_row").click(function() {
           $('#addi' + i).html("<td class='text-center numcell'>" + (i + 1) + "</td><td><input name='sku[]' type='text' placeholder='SKU' class='form-control input-md'  /> </td><td><input  name='qty[]' type='text' placeholder='Quantity'  class='form-control input-md'></td>");

           $('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
           i++;
       });
       $("#delete_row").click(function() {
           if (i > 1) {
               $("#addi" + (i - 1)).html('');
               i--;
           }
       });

   });

不適用於“選擇”下拉列表

的HTML

<div class="row">
   <div class="col-md-1">
   </div>
   <div class="col-md-10" id="inputform">
      <form id="inventorytoadd">
         <table class="table table-striped table-responsive table-hover" id="tab_logic">
            <thead>
               <tr >
                  <th class="text-center">
                     #
                  </th>
                  <th class="text-center">
                     SKU
                  </th>
                  <th class="text-center">
                     Category
                  </th>
                  <th class="text-center">
                     Quantity
                  </th>
               </tr>
            </thead>
            <tbody>
               <tr id='addi0'>
                  <td class="text-center numcell">
                     1
                  </td>
                  <td>
                     <input type="text" name='sku[]' id="sku0"  placeholder='SKU' class="form-control"/>
                  </td>
                  <td>
                     <div class="select">
                        <select name="category[]">
                           <option title="Gaskets" value="Gaskets">Gaskets</option>
                           <option title="Oil Filters" value="Oil Filters">Oil Filters</option>
                           <option title="Air Filters" value="Air Filters">Air Filters</option>
                        </select>
                     </div>
                  </td>
                  <td>
                     <input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
                  </td>
               </tr>
               <tr id='addi1'></tr>
            </tbody>
         </table>
      </form>
   </div>
   <div class="col-md-1">
   </div>
</div>
<div class="row">
   <div class="col-md-3">
   </div>
   <div class="col-md-6 add-delete-rows" id="inventory-add">
      <button id="add_row" class="btn btn-primary">Add Row</button><button id='delete_row' class="btn btn-danger">Delete Row</button>
   </div>
   <div class="col-md-3">
   </div>
</div>

jQuery / JavaScript

$(document).ready(function() {
    var i = 1;
    $('#add_row').click(function() {
        $('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');

        $('tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
        i++;
    });

    $('#delete_row').click(function() {
        if (i > 1) {
            $('#addi' + (i - 1)).html("");
            i--;
        }
    });
});

正如您在小提琴中看到的那樣，它只允許我添加一次行。.由於某種原因，需要單擊兩次才能刪除行。 從我所看到的來看，它似乎是完全相同的代碼功能，這是什么問題？

Answer 1

您在選擇器上錯過了“＃”：$（'＃tab_logic'）

$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
    $('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');

    $('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
    i++;

});

$('#delete_row').click(function() {
    if (i > 1) {
        $('#addi' + (i - 1)).html("");
        i--;
    }
});

}）;