select2 funktioniert nicht mehr für die geklonten Zeilen, warum?

Question

Select2 funktioniert nicht mehr, wenn ich neue Zeilen geklont habe "Dropdown-Menü funktioniert nur für die erste Zeile (Standard)" Dropdown-Menü für die geklonten funktioniert nicht. Hier ist mein Code:

**= f.inputs 'Items not in inventory' do 
    %table 
     %thead 
     %td{style: 'width: 20%; padding-left: 20px;'} 
      %b Select Product 
     %td{style: 'max-width: 70px;'} 
      %b Repossessed Inventory (Serial/Amount) 

     %tbody{id: 'tableToModify'} 
     %tr{id: 'rowToClone'} 
      = semantic_fields_for :other_stuff do |os| 
      %td{style: 'padding-left: 20px;'} 
       = os.input :product_id, as: :select, label: false, collection: Product.all.order(:name).pluck(:name, :id), input_html: {class: 'select2'} 
      %td 
       = os.input :repossessed, label: false, input_html: { style: 'width: 100px;' } 
       %td 

       = link_to "x", "javascript:if ($('#tableToModify tr').length > 1) {document.getElementById('tableToModify').deleteRow($('#tableToModify tr').length - 1);}" 

    = link_to 'Add item', 'javascript:cloneRow()' 
    = f.input :rest_is_lost, as: :boolean, label: 'Mark unrepossessed items as lost', input_html: { checked: 'checked' } 

    = f.actions do 
    = f.action :submit, label: 'Create Repossession Case' 
    = f.action :cancel, label: 'Cancel', button_html: { href: url_for(action: :index) }, wrapper_html: { class: :cancel } 

:javascript 
    function cloneRow(){ 
    var row = document.getElementById("rowToClone"); 
    var table = document.getElementById("tableToModify"); 
    var clone = row.cloneNode(true); 
    var numberOfRows = document.getElementById("tableToModify").rows.length; 
    clone.id = numberOfRows + 1; 
    table.appendChild(clone); 
    }** 

Answer 1

Sie haben select2 zu zerstören, bevor Sie die Zeile und dann binden sie wieder klonen:

function cloneRow(){ 
    var row = document.getElementById("rowToClone"); 
    var table = document.getElementById("tableToModify"); 

    $(table).find('select').select2('destroy'); 

    var clone = row.cloneNode(true); 
    var numberOfRows = document.getElementById("tableToModify").rows.length; 
    clone.id = numberOfRows + 1; 
    table.appendChild(clone); 

    $(table).find('select').select2(); 
}