[英]Selectric not working when added dynamically using jquery
I used the following code to clone the form elements and append to the target in button click.我使用以下代码克隆表单元素并在按钮单击时附加到目标。
$('#addChild').on('click', function () {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');
if (newNum == 4) {
alert("Sorry, You can add upto 3 childrens only");
return false;
}
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Child #' + newNum);
// Title - select
newElem.find('.fnameLabel').attr('for', 'ID' + newNum + '_title');
newElem.find('.fName').attr('id', 'ID' + newNum + '_fName').attr('name', 'ID' + newNum + '_fName').val('');
// First name - text
newElem.find('.surLabel').attr('for', 'ID' + newNum + '_sName');
newElem.find('.sName').attr('id', 'ID' + newNum + '_sName').attr('name', 'ID' + newNum + '_sName').val('');
// Last name - text
newElem.find('.genderLabel').attr('for', 'ID' + newNum + '_gender');
newElem.find('.genderSelect').attr('id', 'ID' + newNum + '_gender').attr('name', 'ID' + newNum + '_gender');
// Color - checkbox
newElem.find('.dobLab').attr('for', 'ID' + newNum + '_dobLab');
newElem.find('.dob').attr('id', 'ID' + newNum + '_dob').attr('name', 'ID' + newNum + '_dob');
$('#entry' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
$('#btnDel').attr('disabled', false);
});
But the problem is, after cloning selectric select box is not working for cloned items.但问题是,克隆后 selectric 选择框不适用于克隆项目。 I dont know where i missed.
我不知道我错过了哪里。 Any help will be much appreciated.
任何帮助都感激不尽。
Please check the fiddle.请检查小提琴。 http://jsfiddle.net/vandanasrivastava/ug1ders7/
http://jsfiddle.net/vandanasrivastava/ug1ders7/
This is an indirect method , you can remove the selectric item from cloned object then reset the select option by default values before append to div , then initialize selectric in appended select box.这是一种间接方法,您可以从克隆对象中删除 selectric 项,然后在附加到 div 之前将选择选项重置为默认值,然后在附加的选择框中初始化 selectric。
var clone = $('.clonedInput').clone();//Clone the input
clone.find(".clonedInput").val(''); // Clear the selected value
//Trigger the action here
var default_html = clone.find(".clonedInput").parent('div').html();//will take the html content of your select box
//clonedInputParentDiv is the name of your clonedInput parents div
clone.find('.clonedInputParentDiv').children('.selectric-wrapper').remove();//Removing all selectric variables from clone
clone.find('.clonedInputParentDiv').append(title); // Append to clone as normal selectbox
clone.find(".clonedInput").selectric();// Initialize the selectric in new appended selectbox
clone.insertAfter('.clonedInput:last');
You have initialized selectric before .clone()
, so that the whole element (already modified by selectric plugin) is cloned.您已在
.clone()
之前初始化selectric ,以便克隆整个元素(已被selectric插件修改)。
You should clone the element before initializing the plugin.您应该在初始化插件之前克隆该元素。
// clone it before .selectric():
var newEl = $('#entry1').clone();
// initialize plugin:
$(".basic").selectric();
$('#addChild').on('click', function () {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
// use cloned object without the data appended by selectric:
newElem = newEl.clone().attr('id', 'entry' + newNum).fadeIn('slow');
// ...
// Then initialize the plugin for the new ".basic" elements:
$(newElem).appendTo('.allCatsContainer').find(".basic").selectric();
});
Another thing is that all cloned <select>
elements have the same ids': ( #gender
, #day
, #month
, #year
)另一件事是所有克隆的
<select>
元素都具有相同的 id': ( #gender
, #day
, #month
, #year
)
Modify these id's too or don't use them if you don't need.也修改这些 id 或者如果不需要就不要使用它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.