如何使用jQuery將Kendo DropDownList動態添加到html5表中

Question

我需要在class =「classAdd」中單擊該按鈕後動態地將一行添加到HTML5表中，並且我有一行的問題這是一個劍道的下拉列表，它不能很好地顯示。

HTML5：

<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

移動這一行：

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

，使其上面的這一個：

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

你已經建立的變量「contactdiv」的HTML需要在你面前被添加到DOM可以使用上面一行中的jquery選擇器來查找元素並將其轉換爲下拉列表。