Sklonowany Select2 nie odpowiada

Question

Próbuję sklonować wiersz, który zawiera narzędzie select2, gdy klonować tego wiersza za pomocą jQuery klonowane select2 nie odpowiada. W obrazie poniżej pierwszy select2, który jest oryginalny działa dobrze, ale 2 i 3 select2 które nie sklonowanych odpowiadać

fragment kodu:

$(document).ready(function() { 
 
    var clonedRow = $('.parentRow').clone().html(); 
 
    var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>'; 
 
    $('#addRow').click(function() { 
 
    $('#test').after(appendRow); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr class="parentRow" id="test"> 
 
    <td> 
 
    <g:message code="educationDetails.educationLevel.label" default="Education Level" /> 
 
    </td> 
 
    <td> 
 
    <div style="float: left;"> 
 
     <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" /> 
 
    </div> 
 
    <div> 
 
     <a href="javascript:void(0)" id="addRow"> 
 
     <img alt="" title="Add Additional Education Level" src="/static/images 
 
                   /top_submit_1.gif"> 
 
     </a> 
 
    </div> 
 
    </td> 
 
</tr>

Answer 1

Przed sklonować wiersz, trzeba wyłączyć select2 na zaznaczonym elemencie przez wywołanie metody destroy:

zniszczyć

Przywraca zmian DOM wykonywane przez Select2. Każda selekcja wykonana przez Select2 zostanie zachowana.

Zobacz http://ivaynberg.github.io/select2/index.html

Po sklonować wiersz i wstawić jego klon w DOM, musisz włączyć select2 na obu wybranych elementów (oryginał i jedną nową sklonowany jeden).

Oto JSFiddle, który pokazuje w jaki sposób można to zrobić: http://jsfiddle.net/ZzgTG/

kod Fiddle za

HTML

<div id="contents"> 
    <select id="sel" data-placeholder="-Select education level-"> 
     <option></option> 
     <option value="a">High School</option> 
     <option value="b">Bachelor</option> 
     <option value="c">Master's</option> 
     <option value="c">Doctorate</option> 
    </select> 
</div> 
<br> 
<button id="add">add a dropdown</button> 

CSS

#contents div.select2-container { 
    margin: 10px; 
    display: block; 
    max-width: 60%; 
} 

jQuery

$(document).ready(function() { 
    $("#contents").children("select").select2(); 
    $("#add").click(function() { 
     $("#contents") 
      .children("select") 
      // call destroy to revert the changes made by Select2 
      .select2("destroy") 
      .end() 
      .append(
       // clone the row and insert it in the DOM 
       $("#contents") 
       .children("select") 
       .first() 
       .clone() 
     ); 
     // enable Select2 on the select elements 
     $("#contents").children("select").select2(); 
    }); 
}); 

Answer 2

Rozwiązałem to przez tworzenie inną funkcję Klon:

jQuery.fn.cloneSelect2 = function (withDataAndEvents, deepWithDataAndEvents) { 
    var $oldSelects2 = this.is('select') ? this : this.find('select'); 
    $oldSelects2.select2('destroy'); 
    var $clonedEl = this.clone(withDataAndEvents, deepWithDataAndEvents); 
    $oldSelects2.select2(); 
    $clonedEl.is('select') ? $clonedEl.select2() : 
          $clonedEl.find('select').select2(); 
    return $clonedEl; 
}; 

Answer 3

I rozwiązać ten problem z nim:
połączeń zniszczyć metodę przed dodaniem nowego wiersza

$(".className").select2("destroy"); //Destroy method , connect with class no ID (recomend) 

Po tym wywołaniu funkcja select2 jQuery:

$(".className").select2({    
       placeholder: "Example", 
       alowClear:true 
      }); 

nadzieję, że pomoże;)

Answer 4

I w obliczu tego samego problemu, starając się dodać wiersz do tabeli dynamicznie. (wiersz zawiera więcej niż jedną instancję select2.)

Rozwiązałem to w ten sposób:

function addrow() 
{ 
    var row = $("#table1 tr:last"); 

    row.find(".select2").each(function(index) 
    { 
     $(this).select2('destroy'); 
    }); 

    var newrow = row.clone();  

    $("#table1").append(newrow); 

    $("select.select2").select2(); 
} 

Sztuką było to, że trzeba zniszczyć wszystkie instancje .select2 oddzielnie i przed klonowanie wiersz. A następnie po klonowaniu ponownie zainicjuj plik .select2. Mam nadzieję, że to zadziała również dla innych.

Answer 5

trzeba zniszczyć wszystkie select2 zanim klonowania na przykład:

var div = $("#filterForm div"); 

    //find all select2 and destroy them 
    div.find(".select2").each(function(index) 
    { 
     if ($(this).data('select2')) { 
      $(this).select2('destroy'); 
      } 
    }); 

    //Now clone you select2 div 
    $('.filterDiv:last').clone(true).insertAfter(".filterDiv:last"); 

    //we must have to re-initialize select2 
    $('.select2').select2(); 

Answer 6

trzeba zniszczyć select2 pierwszy przed klonowaniem, ale .select2 („zniszczyć”) nie działa. Użyj tego:

$myClone = $("section.origen").clone(); 

$myClone.find("span").remove(); 
$myClone.find("select").select2(); 

$("div").append($myClone);