如何使用 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 选择器查找元素并将其转换为下拉列表。