当使用jquery动态添加时，Selectric无法正常工作

我使用下面的代码来克隆表单元素并将其附加到按钮单击中的目标。当使用jquery动态添加时，Selectric无法正常工作

$('#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); 

    });

但问题是，克隆selectric选择框后克隆的项目不工作。我不知道我错过了什么。任何帮助都感激不尽。

请检查小提琴。 http://jsfiddle.net/vandanasrivastava/ug1ders7/

来源

2015-11-07 Vandhana Jayaprakash

您想将其重置为默认值以便在下一行进行克隆？对？ –

没有..克隆后selectric不适用于克隆项目。当我点击克隆物品的selectric选择框时，它不会打开....请参阅小提琴获取更多信息。 –

你已经初始化selectric.clone()之前，让整件（已被selectric插件修改）被克隆。

您应该在初始化插件之前克隆元素。

// 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

另一件事是，所有克隆<select>元素具有相同的ID：（#gender，#day，#month，#year）
修改这些ID的太多或者不使用它们如果你不需要。

来源

2015-11-07 12:05:43

谢谢tonnn .... !!!!!! ... Ur解决方案就像一个魅力:) –

当使用jquery动态添加时，Selectric无法正常工作

回答

相关问题