jQuery 克隆无法使用 syncfusion 控件
jQuery clone not working with syncfusion controls
我有一个 div，里面有 syncfusion 控件。克隆后，它们不会按预期出现在复制的 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>
您已将 Syncfusion 控件呈现为包装器组件。单击添加按钮时，您已经克隆了已经渲染的包装器组件，并再次重新渲染为一个新组件。因此，克隆的元素在包装器组件上再次呈现（这样您就可以在组件中获得双边框和图标）。因此，建议将 Syncfusion 组件呈现为输入元素而不是包装器组件，以消除此问题。这是修改后的代码片段，
[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中的示例。
请参阅 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>
您已将 Syncfusion 控件呈现为包装器组件。单击添加按钮时，您已经克隆了已经渲染的包装器组件，并再次重新渲染为一个新组件。因此，克隆的元素在包装器组件上再次呈现（这样您就可以在组件中获得双边框和图标）。因此，建议将 Syncfusion 组件呈现为输入元素而不是包装器组件，以消除此问题。这是修改后的代码片段，
[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中的示例。