Я пытаюсь клонировать строку, которая содержит инструмент select2, когда я клонирую эту строку, используя jQuery, клонированный select2 не отвечает. В приведенном ниже изображении сначала select2, который является оригинальным, работает отлично, но 2-й и 3-й select2, которые клонированы не отвечая
фрагмент кода:
$(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>