Selectric not working when added dynamically using jquery

Question

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. I dont know where i missed. Any help will be much appreciated.

Please check the fiddle. http://jsfiddle.net/vandanasrivastava/ug1ders7/

You want to reset it to default for cloning in the next row? right? — Maha Dev, Nov 07 '15 at 11:49
no .. after cloning the selectric is not working for cloned items. When i click on selectric select box of cloned items , its not opening .... see the fiddle for more info. — Vandhana Jayaprakash, Nov 07 '15 at 11:55

score 2 · Answer 1 · answered May 15 '20 at 05:37

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.

  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');

Artur Filipiak · Accepted Answer · 2015-11-07T12:12:23.853

You have initialized selectric before .clone(), so that the whole element (already modified by selectric plugin) is cloned.

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();

});

JSFiddle demo

Another thing is that all cloned <select> elements have the same ids': (#gender, #day, #month, #year)
Modify these id's too or don't use them if you don't need.

Selectric not working when added dynamically using jquery

2 Answers2