附加包含选择和输入字段的行后，选择和输入不起作用

Question

我在另一个 div 中使用下拉选择附加了一个 div.row，该 div 可以使用 jQuery 进行排序 usinf kendo 排序方法，它的加载完美，但是选择和输入不起作用，因为选择不显示选项和输入字段不让我写里面的任何东西。我在这篇文章中附上了图片，这是附加代码的结果。突出显示的字段不起作用。请在这里帮忙

这是我的代码：

<div class="mb-4">
    <div class="w-50">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01"><i class="fas fa-filter"></i></label>                                 
                @(Html.Kendo().DropDownList()
                    .Name("ddlGetTransactionFiltersList")
                    .DataTextField("Name")
                    .DataValueField("Value")
                    .HtmlAttributes(new
                    {
                        @class = "selectAFrequencyStyle",
                        style= "width:100%;"
                    })
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTransactionFiltersList", "Reports");
                        });
                    })
                    )
            </div>
        </div>
    </div>                                                     
<div id = "showAdvanceFiltersFieldsHere"></div>



JS:
var domElemnet = {
showAdvanceFiltersFieldsHere: $("#showAdvanceFiltersFieldsHere")
}

$("#ddlGetTransactionFiltersList").data("kendoDropDownList").bind("change", function (e) {
        if (e.sender.text() != "Input or select filter") {

            if (e.sender.text() == "Date" ||
                e.sender.text() == "Date & Time" ||
                e.sender.text() == "Time" ||
                e.sender.text() == "Batch Date & Time" ||
                e.sender.text() == "Batch Date" ||
                e.sender.text() == "Batch Time") {
                domElemnet.showAdvanceFiltersFieldsHere.append('<div class = "row mt-2 mb-2 p-2 border-bottom border-top mr-2 ml-2 showAdvanceFilterscls"><div class = "col-md-2" > <p>' + e.sender.text() + '</p></div><div class = "col-md-4"><div class="form-group"><select class="form-control"><option>Equals</option><option>Contains</option><option>Is Greater Than</option><option>Is Less Than</option><option>Does Not Equal</option><option>Starts With</option><option>Ends With</option><option>In List</option><option>Not In List</option><option>Does Not Contain</option></select></div></div><div class = "col-md-4"><div id = "customKendoCalendar" class="demo-section k-content"><div class="k-rtl"><h4>Choose date:</h4><span class="k-widget k-datepicker" style="width: 100%;"><span class="k-picker-wrap k-state-default k-state-hover k-valid"><input id="datepicker" name="datepicker" style="width: 100%" type="text" value="" data-role="datepicker" class="k-input k-valid" role="combobox" aria-expanded="false" aria-owns="datepicker_dateview" autocomplete="off" aria-disabled="false"><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="datepicker_dateview"><span class="k-icon k-i-calendar"></span></span></span></span><script>kendo.syncReady(function(){jQuery("#datepicker").kendoDatePicker({"format":"dd/MM/yyyy"});})</script></div></div></div><div class = "col-md-1 text-right"><a href = "#"><i class="fas fa-arrows-alt handler"></i></a></div><div class = "col-md-1 text-right"><a class="deleteThisFilter" href= "#"><i class="fas fa-trash-alt"></i></a></div></div>');
            } else {
                domElemnet.showAdvanceFiltersFieldsHere.append('<div class = "row mt-2 mb-2 p-2 border-bottom border-top mr-2 ml-2 showAdvanceFilterscls"><div class = "col-md-2" > <p>' + e.sender.text() + '</p></div><div class = "col-md-4"><div class="form-group"><select class="form-control"><option>Equals</option><option>Contains</option><option>Is Greater Than</option><option>Is Less Than</option><option>Does Not Equal</option><option>Starts With</option><option>Ends With</option><option>In List</option><option>Not In List</option><option>Does Not Contain</option></select></div></div><div class = "col-md-4"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1"><i class="fas fa-filter"></i></span></div><input type="text" class="form-control FilterValuesInp" placeholder="Filter value" aria-label="Filter value" aria-describedby="basic-addon1"></div></div><div class = "col-md-1 text-right"><a href = "#"><i class="fas fa-arrows-alt handler"></i></a></div><div class = "col-md-1 text-right"><a class="deleteThisFilter" href= "#"><i class="fas fa-trash-alt"></i></a></div></div>');
            }
        }

    });
$("#showAdvanceFiltersFieldsHere").kendoSortable({
        hint: function (element) {
            return element.clone()
            .width(element.width());
        },
        handler: ".handler",
        axis: "y",
        connectWith: ".row",
        cursorOffset: {
            top: -10,

    }
});

Result

Answer 1

看起来您正在附加整个标记以及由 HTML Helper 生成的初始化脚本。相反，追加一个元素并使用它来初始化 Kendo 小部件。您也可以使用one method 来确保初始化只进行一次。目前，您将在每个更改事件上初始化小部件。

Here is a sample 在 DropDownList 的第一个更改事件上初始化 DatePicker