Javascript 如何使用jQuery将Kendo DropDownList动态添加到html5表中

我需要在用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>

产品
普里西奥
康蒂达
@（Html.Kendo（）.DropDownList（））
.名称（“productoPresupuesto”）
.OptionLabel（“选择不生产…”）
.DataTextField（“DescriptionProducto”）
.DataValueField（“CodigoProducto”）
.HtmlAttributes（新的{style=“width:100%”）
.过滤器（“包含”）
.DataSource（source=>
{
source.Read（Read=>
{
读取.操作（“ObtenerProductoAsync”、“Mantenimiento”）；
});
})
)
添加更多

这是第一行，它可以正常工作，但当我尝试添加一个新行时，剑道下拉列表不显示ok，这发生在我单击“添加更多”按钮后

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

$（文档）.ready（函数（）{
$（document）.on（“click”，“.classAdd”，函数（）{//
var rowCount=$（'.productos prespuesto'）。长度+1；
var contactdiv=“”+
'' +
'' +
'' +
“添加更多”+
“删除”+
'';
$（“#productoPresupuesto”+行数）。kendoDropDownList({
dataTextField:'DescriptionProducto'，
dataValueField:'CodigoProducto'，
数据源：{
运输：{
阅读：{
类型：“jsonp”，
url:“Mantenimiento/ObtenerProductoAsync”
}
}
}
});
$（'#tablePost'）。追加（contactdiv）；
});
});

如何解决此问题？

移动此行：

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

所以它在这个上面：

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

---

您在变量“contactdiv”中构建的html需要附加到DOM中，然后才能使用上行中的jquery选择器查找元素并将其转换为下拉列表。

感谢您的回复。但是它在下拉列表中没有显示任何要选择的值，其值由Mantenimiento控制器的ObtenerProductoAsync方法返回。很高兴提供帮助。Jsonp用于跨域请求，工作方式稍有不同，需要定义回调来处理结果。看起来你不需要它。