jQuery 克隆不适用于同步融合控件

Question

我有一个 div，里面有同步融合控件。克隆时，它们不会按预期出现在复制的 div 中。 Syncfusion 在页面加载时将自己的自定义脚本添加到控件中，因此您会看到我在克隆后也在做同样的事情。

请参阅以下 HTML 声明：

<div id="abc" class="row">
    <div id="xyz" class="col-md-3">
        <div class="card">
            <div class="card-header applicant-title">
                <span>Applicant 1</span>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label asp-for="Applicants[0].SocialSecurityNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        <ejs-maskedtextbox id="Applicants_0__SocialSecurityNumber" name="Applicants[0].SocialSecurityNumber" mask="000-00-0000"></ejs-maskedtextbox>
                        <span asp-validation-for="Applicants[0].SocialSecurityNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].Birthdate" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        <ejs-datepicker id="Applicants_0__Birthdate" name="Applicants[0].Birthdate" placeholder="Choose a Date"></ejs-datepicker>
                        <span asp-validation-for="Applicants[0].Birthdate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].PhoneNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        <ejs-maskedtextbox id="Applicants_0__PhoneNumber" name="Applicants[0].PhoneNumber" mask="(999)-999-9999"></ejs-maskedtextbox>
                        <span asp-validation-for="Applicants[0].PhoneNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].WorkPhoneNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        <ejs-maskedtextbox id="Applicants_0__WorkPhoneNumber" name="Applicants[0].WorkPhoneNumber" mask="(999)-999-9999"></ejs-maskedtextbox>
                        <span asp-validation-for="Applicants[0].WorkPhoneNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].Points" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        <ejs-numerictextbox id="Applicants_0__Points" name="Applicants[0].Points" maxlength="2" format="n" Type="text" showSpinButton="false" showClearButton="false" min="0" max="50"></ejs-numerictextbox>
                        <span asp-validation-for="Applicants[0].Points" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript 代码：

<script type="text/javascript">

    var i = 0;

    // Declare Syncfusion control settings
    var MaskedTextBox1 = new ejs.inputs.MaskedTextBox({
        "mask": "000-00-0000"
    });
    var DatePicker1 = new ejs.calendars.DatePicker({
        "placeholder": "Choose a Date"
    });

    var MaskedTextBox2 = new ejs.inputs.MaskedTextBox({
        "mask": "(999)-999-9999"
    });

    var MaskedTextBox3 = new ejs.inputs.MaskedTextBox({
        "mask": "(999)-999-9999"
    });

    var NumericTextBox1 = new ejs.inputs.NumericTextBox({
        "format": "n",
        "max": 50,
        "min": 0,
        "showSpinButton": false,
        "step": 1.0
    });

    $("#btnAdd").click(function () {

        i++;

        var xyz = $("#xyz").clone();

        xyz.find('label').each(function () {
            var attr = $(this).attr("for");
            if (attr != null) {
                $(this).attr("for", attr.replace('_0_', '_' + i + '_'));
            }
        });

        xyz.find('input').each(function () {
            this.name = this.name.replace('[0]', '[' + i + ']');
            this.id = this.id.replace('_0_', '_' + i + '_');
            $(this).val(null);
        });

        xyz.find('span').each(function () {
            var attr = $(this).data("valmsg-for");
            if (attr != null) {
                $(this).attr("data-valmsg-for", attr.replace('[0]', '[' + i + ']'));
            }
        });

        var divTitle = xyz.find('.applicant-title span')[0];
        divTitle.innerText = divTitle.innerText.replace('1', i + 1);

        $("#abc").append(xyz);

        // APPEND Syncfusion settings to copied controls
        MaskedTextBox1.appendTo("#Applicants_" + i + "__SocialSecurityNumber");
        DatePicker1.appendTo("#Applicants_" + i +"__Birthdate");
        MaskedTextBox2.appendTo("#Applicants_" + i + "__PhoneNumber");
        MaskedTextBox3.appendTo("#Applicants_" + i + "__WorkPhoneNumber");
        NumericTextBox1.appendTo("#Applicants_" + i + "__Points");
    });
</script>

Answer 1

您已将 Syncfusion 控件呈现为包装器组件。单击添加按钮时，您已经克隆了已经渲染的包装器组件，并再次重新渲染为新的集合。因此，克隆的元素在包装组件上再次呈现（这样您就可以在组件中获得双边框和图标）。因此，建议将 Syncfusion 组件呈现为输入元素而不是包装器组件，以消除此问题。这里是修改后的代码sn -p，

[Clone.cshtml]

<form method="post">
<div id="abc" class="row">
    <div id="xyz" class="col-md-3">
        <div class="card">
            <div class="card-header applicant-title">
                <span>Applicant 1</span>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label asp-for="Applicants[0].SocialSecurityNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        @* Render the masked edit component as input *@
                        <input type="text" id="Applicants_0__SocialSecurityNumber" name="Applicants[0].SocialSecurityNumber" />
                        <span asp-validation-for="Applicants[0].SocialSecurityNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].Birthdate" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        @* Render the  datepicker component as input *@
                        <input type="text" id="Applicants_0__Birthdate" name="Applicants[0].Birthdate" />
                        <span asp-validation-for="Applicants[0].Birthdate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].PhoneNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        @* Render the masked edit component as input *@
                        <input type="text" id="Applicants_0__PhoneNumber" name="Applicants[0].PhoneNumber" />
                        <span asp-validation-for="Applicants[0].PhoneNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].WorkPhoneNumber" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        @* Render the masked edit component as input *@
                        <input type="text" id="Applicants_0__WorkPhoneNumber" name="Applicants[0].WorkPhoneNumber" />
                        <span asp-validation-for="Applicants[0].WorkPhoneNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Applicants[0].Points" class="col-sm-4 col-form-label"></label>
                    <div class="col-sm-8">
                        @* Render the numeric text box component as input *@
                        <input type="text" id="Applicants_0__Points" name="Applicants[0].Points" />
                        <span asp-validation-for="Applicants[0].Points" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row mt-2">
    <div class="col-md-12">
        <div class="form-group row">
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

@section 脚本 {

<script type="text/javascript">
    // Copy the clone element of the Syncfusion controls
    var xyz = $("#xyz").clone();
    // store the DOM string and assign the value to "xyz"
    xyz = xyz[0].outerHTML;
    // Take the another one copy of the outer HTML element into "copy" for further reference
    var copy = xyz;
    var i = 0;

    $("#btnAdd").click(function () {

        i++;
        // convert the outer HTML string into the HTML DOM object.
        xyz = $(xyz);
        // Assign the unique ID for the each card control
        xyz[0].setAttribute('id', 'xyz' + i);

        xyz.find('label').each(function () {
            var attr = $(this).attr("for");
            if (attr != null) {
                $(this).attr("for", attr.replace('_0_', '_' + i + '_'));
            }
        });

        xyz.find('input').each(function () {
            this.name = this.name.replace('[0]', '[' + i + ']');
            this.id = this.id.replace('_0_', '_' + i + '_');
            $(this).val(null);
        });

        xyz.find('span').each(function () {
            var attr = $(this).data("valmsg-for");
            if (attr != null) {
                $(this).attr("data-valmsg-for", attr.replace('[0]', '[' + i + ']'));
            }
        });

        var divTitle = xyz.find('.applicant-title span')[0];
        divTitle.innerText = divTitle.innerText.replace('1', i + 1);

        $("#abc").append(xyz);

        // Declare new instance for Syncfusion control settings will helps to render the component as a new set without any issues.

        // Render masked text box component
        var MaskedTextBox1 = new ejs.inputs.MaskedTextBox({
            "mask": "000-00-0000"
        });

        // Render the datepicker component
        var DatePicker1 = new ejs.calendars.DatePicker({
            "placeholder": "Choose a Date"
        });

        // Render the masked text box component
        var MaskedTextBox2 = new ejs.inputs.MaskedTextBox({
            "mask": "(999)-999-9999"
        });

        // Render the masked text box component
        var MaskedTextBox3 = new ejs.inputs.MaskedTextBox({
            "mask": "(999)-999-9999"
        });

        // Render the numeric text box component
        var NumericTextBox1 = new ejs.inputs.NumericTextBox({
            "format": "n",
            "max": 50,
            "min": 0,
            "showSpinButton": false,
            "step": 1.0
        });

        // APPEND Syncfusion settings to copied controls
        MaskedTextBox1.appendTo("#Applicants_" + i + "__SocialSecurityNumber");
        DatePicker1.appendTo("#Applicants_" + i + "__Birthdate");
        MaskedTextBox2.appendTo("#Applicants_" + i + "__PhoneNumber");
        MaskedTextBox3.appendTo("#Applicants_" + i + "__WorkPhoneNumber");
        NumericTextBox1.appendTo("#Applicants_" + i + "__Points");  
        // Assign the reference copy of outer element to the "xyz" again
        xyz = copy;
    });

    // Render the initially defined masked text box component
    var mask = new ejs.inputs.MaskedTextBox({
        "mask": "000-00-0000"
    });
    mask.appendTo("#Applicants_0__SocialSecurityNumber");

    // Render the initially defined datepicker component
    var datepicker = new ejs.calendars.DatePicker({
        "placeholder": "Choose a Date"
    });
    datepicker.appendTo("#Applicants_0__Birthdate");

    // Render the initially defined masked text box component
    var mask2 = new ejs.inputs.MaskedTextBox({
        "mask": "(999)-999-9999"
    });
    mask2.appendTo("#Applicants_0__PhoneNumber");

    // Render the initially defined masked text box component
    var mask3 = new ejs.inputs.MaskedTextBox({
        "mask": "(999)-999-9999"
    });
    mask3.appendTo("#Applicants_0__WorkPhoneNumber");

    // Render the initially defined numeric text box component
    var numeric = new ejs.inputs.NumericTextBox({
        "format": "n",
        "max": 50,
        "min": 0,
        "showSpinButton": false,
        "step": 1.0,
        "showClearButton": false
    });
    numeric.appendTo("#Applicants_0__Points");

</script>

}

您可以参考here的示例。