在追加一行包含选择和输入字段后，选择和输入不起作用

Question

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

这是我的代码：

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

结果

Answer 1

看起来您正在附加HTML Helper生成的整个标记以及初始化脚本。相反，添加一个元素并使用它来初始化Kendo小部件。此外，您可以使用一种方法来确保初始化只完成一次。目前，您将在每次更改事件中初始化小部件。

下面是一个示例，其中在DropDownList 的第一个更改事件上初始化DatePicker