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

Question

I have appended a div.row using dropdown selection inside another div which is sortable usinf kendo sortable method using jQuery, its loading perfectly, but select and inputs are not working as select is not showing options and input field not letting me write anything inside. 我在这篇文章中附上了图片，这是附加代码的结果。 突出显示的字段不起作用。 请在这里帮忙

这是我的代码：

<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 助手生成的整个标记以及初始化脚本。 相反，append 是一个元素并使用它来初始化 Kendo 小部件。 您也可以使用一种方法来确保初始化只进行一次。 目前，您将在每个更改事件上初始化小部件。

这是一个在 DropDownList 的第一个更改事件上初始化 DatePicker 的示例