jQueryを使用してhtml5のテーブルに動的に剣道DropDownListを追加するには

Question

class = "classAdd"のボタンをクリックした後、HTML5テーブルに行を動的に追加する必要があります。それは剣道のドロップダウンリストですが、それはうまく表示されません。

HTML5：

これは最初の行をしたし、それは大丈夫動作しますが、私は剣道のドロップダウンリストは、[OK]を表示しない新しい行を追加しようとしたとき、これは私がボタンを追加]をクリックした後に起こる

<table id="tablePost" class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Producto</th> 
      <th>Precio</th> 
      <th>Cantidad</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="productos-presupuesto"> 
      <td> 
       @(Html.Kendo().DropDownList() 
       .Name("productoPresupuesto") 
       .OptionLabel("Seleccione un producto...") 
       .DataTextField("DescripcionProducto") 
       .DataValueField("CodigoProducto") 
       .HtmlAttributes(new { style = "width:100%" }) 
       .Filter("contains") 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("ObtenerProductoAsync","Mantenimiento"); 
        }); 
       }) 
       ) 
      </td> 
      <td> 
       <input class="form-control" type="number" name="precio" /> 
      </td> 
      <td> 
       <input class="form-control" type="number" name="cantidad" /> 
      </td> 
      <td> 
       <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 

もっと。

のjQuery：

$(document).ready(function() { 
     $(document).on("click", ".classAdd", function() { // 
      var rowCount = $('.productos-presupuesto').length + 1; 
      var contactdiv = '<tr class="productos-presupuesto">' + 
       '<td><input id="productoPresupuesto' + rowCount + '" /></td>' + 
       '<td><input type="text" name="precio' + rowCount + '" class="form-control" /></td>' + 
       '<td><input type="text" name="cantidad' + rowCount + '" class="form-control" /></td>' + 
       '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button>' + 
       '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' + 
       '</tr>'; 

       $("#productoPresupuesto"+ rowCount).kendoDropDownList({ 
        dataTextField: 'DescripcionProducto', 
        dataValueField: 'CodigoProducto', 
        dataSource: { 
         transport: { 
          read: { 
           type: "jsonp", 
           url: "Mantenimiento/ObtenerProductoAsync" 
          } 
         } 
        } 

       }); 

      $('#tablePost').append(contactdiv); 
     }); 
    }); 

どのように私はこの問題を解決することができますか？

Answer 1

移動し、この行：それはこの1つ上にあることを

$('#tablePost').append(contactdiv); 

：あなたは変数「contactdiv」に内蔵されているHTMLは

$("#productoPresupuesto"+ rowCount).kendoDropDownList({ 

はあなたの前にDOMに追加する必要があります上記の行のjqueryセレクタを使用して要素を見つけてドロップダウンに変換できます。