Динамическая форма не работает в таблице

Question

У меня есть динамический вид, .. Я использую это для заполнения другого выбора опции, и она работает

$(document).ready(function() { 
    $("#itemRows").on("change", ".jenis", function() { 
     var id = $(this).val(); 
     var dataString = 'jenis=' + id; 
     var par = $(this); 


     $.ajax({ 
      type: "POST", 
      url: "ajax_menu.php", 
      data: dataString, 
      cache: false, 
      success: function (html) { 
       par.siblings(".bahan").html(html); 

      } 
     }); 

    }); 
    }); 

демо динамической формы fiddle

, если я использую это в HTML , он будет отлично работает:

<div id="itemRows"> 
<select name="jenis" class="jenis"> 
    <option selected="selected">--Jenis Makanan--</option> 
    <option value="1">Makanan Pokok</option> 
    <option value="2">Daging Telur</option> 
    <option value="3">Buah</option> 
    <option value="4">Seafood</option> 
    <option value="5">Bijian</option> 
    <option value="6">Sayuran</option> 
    <option value="7">Susu Minyak</option> 
</select> 
<select name="bahan" class="bahan"> 
    <option selected="selected">--Pilih Bahan--</option> 
</select> 
</div> 

Но если я использую это в моем HTML, .. он не работает

<table class="table table-striped" id="itemRows" cellpadding="3"> 
    <tbody> 
    <tr> 
     <th scope="col">No.</th> 
     <th scope="col">Jenis</th> 
     <th scope="col">Nama Bahan</th> 

     <th scope="col"> 
     <input onclick="addRow(this.form);" type="button" value="Add row"> 
     </th> 
    </tr> 
    <tr class="1"> 
     <td>1</td> 
     <td> 
     <select name="jenis" class="jenis"> 
      <option selected="selected">--Jenis Makanan--</option> 
      <option value="1">Makanan Pokok</option> 
      <option value="2">Daging Telur</option> 
      <option value="3">Buah</option> 
      <option value="4">Seafood</option> 
      <option value="5">Bijian</option> 
      <option value="6">Sayuran</option> 
      <option value="7">Susu Minyak</option> 
     </select> 
     </td> 
     <td> 
     <select name="bahan" class="bahan"> 
      <option selected="selected">--Pilih Bahan--</option> 
     </select> 
     </td> 
     <td> 
     <input type="button" value="Remove" onclick="removeRow(1);"> 
     </td> 
    </tr> 
    </tbody> 
</table> 

любая идея, почему это не работает?

Answer 1

Вам нужно изменить par.siblings(".bahan").html(html); к par.closest('tr').find(".bahan").html(html);, потому что теперь они не являются братьями и сестрами

$(document).ready(function() { 
    $("#itemRows").on("change", ".jenis", function() { 
     var id = $(this).val(); 
     var dataString = 'jenis=' + id; 
     var par = $(this); 


     $.ajax({ 
      type: "POST", 
      url: "ajax_menu.php", 
      data: dataString, 
      cache: false, 
      success: function (html) { 
       par.closest('tr').find(".bahan").html(html); 
       //or par.closest('td').next().find(".bahan").html(html); 
      } 
     }); 

    }); 
}); 

Демо: Fiddle