附加包含 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. I have attached the image with this post which is the result of appended code. the highlighted fields are not working. plz help here

here is my code:

<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

Looks like you are appending the entire markup, along with the initialization script, generated by a HTML Helper. Instead, append an element and use it to initialize a Kendo widget. Also you may use the one method to make sure the initialization is done only once. Currently you will initialize widgets on every change event.

Here is a sample where a DatePicker is initialized on the first change event of the DropDownList