jQuery를 사용하여 Html5 테이블에 동적으로 Kendo DropDownList를 추가하는 방법

Question

class = "classAdd"인 버튼을 클릭 한 후 HTML5 테이블에 동적으로 행을 추가해야하며 행의 한 열에 문제가 있습니다. 그것은 kendo의 드롭 다운 목록이지만, 잘 표시되지 않습니다.

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); 

: 당신이 변수 'contactdiv'에 내장되어있는 HTML이

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

는 전에 DOM에 추가 될 필요가 위의 줄에있는 jquery 선택기를 사용하여 요소를 찾아서 드롭 다운으로 변환 할 수 있습니다.