Question

我正在做一个噩梦，试图让jQuery Chosen插件在克隆表行后正确呈现。我已经仔细检查并尝试了许多建议和“保证修复”但却无法正常工作。

根据我的尝试，我要么能够显示（或不显示）标准选择框，要么我可以设法显示选择框，该框仅控制原始行：（

这是最新删除预先存在的所选div，并显示标准选择框。

请注意我可以通过简单地添加所需的类 - “selected-select”，“selected-select-no-single”等，document.ready创建集选择（），将所有其他选择呈现为选择选择具有任何选择选择类的每个对象

要克隆的

HTML 行：

   <tr id='formListRow' class='row'>
    <td><input id='itmDesc0' name='itmDesc0' class='long lockableField' type='text' placeholder='Description' value=''></td>
    <td>
     <select id='itmCategory0' name='itmCategory0' class='chosen-select-no-single'>   
      <options></option>
     </select>
    </td>
   </tr>

JS

var $row = document.getElementById("formListRow"); // find row to copy
var $newRow = jQuery($("#formListRow")).clone (true); // copy children too
$newRow.attr('id','newRow' + itm); // change id or other attributes/contents
$newRow.find('select').each(function(){
  $(this).removeClass().removeAttr('id').css('display','block').next().remove();
  $(this).attr('name','itmCategory' + itm);
  $(this).attr('id','itmCategory' + itm);
  $(this).addClass('chosen-select-no-single');
  $(this).chosen();
});


$("#formListRow").before($newRow);

指导非常感谢。 JP

更新

创建另一个用于测试目的的函数，以便Chosen插件在插入后可以应用于新克隆的元素也不会产生任何差别：

function setNewChosen(itm){
    $(".chosen-select-no-single").last().chosen();
}

Answer 1

您需要在动态创建元素后应用插件。

这应该有效：

$newRow.find('select').each(function(){
  $(this).removeClass().removeAttr('id').css('display','block').next().remove();
  $(this).attr('name','itmCategory' + itm);
  $(this).attr('id','itmCategory' + itm);
  $(this).addClass('chosen-select-no-single');
  $(this).chosen();
});

请注意，原始行应该是原生选择元素，而不是选定的元素。

jquery克隆后行选择不呈现

1 个答案: