在克隆的select2的select事件上

Question

我需要采取哪些额外步骤来监听select2：在克隆的select2上选择？

我在点击功能的开头尝试了.clone(true)，$('.myclass').select2('destroy');，并使用$('#table tbody').hide().show(0);刷新了DOM。

这似乎是基于此GitHub问题的推荐方式。

https://github.com/select2/select2/issues/2522

$('.myclass').select2();

$('.myclass').on('select2:select', function(e) {
	alert('foo');
});

$('#addRow').click(function() {
  $('#table tbody').append($('#table tbody tr:last').clone());
  $('#table tbody tr:nth-last-child(2) select').addClass('myclass');
  $('.myclass').select2();  
});

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<table id="table">
 <thead></thead>
 <tbody>
   <tr>
     <td>
      <select class="myclass">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select> 
     </td>
   </tr>
   <tr>
     <td>
       <select id="clone" class="hidden">
        <option>1</option>
        <option>2</option>
        <option>3</option>
       </select>
     </td>
   </tr>
 </tbody>
 <tfoot>
  <button id="addRow">
    Add Row 
  </button>
 </tfoot>
</table>

Answer 1

您可以event delegation将事件绑定到动态添加的元素。

$('.myclass').select2();

$(document).on('select2:select','.myclass', function(e) {
	alert('foo');
});

$('#addRow').click(function() {
  $('#table tbody').append($('#table tbody tr:last').clone());
  $('#table tbody tr:nth-last-child(2) select').addClass('myclass');
  $('.myclass').select2();  
});

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<table id="table">
 <thead></thead>
 <tbody>
   <tr>
     <td>
      <select class="myclass">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select> 
     </td>
   </tr>
   <tr>
     <td>
       <select id="clone" class="hidden">
        <option>1</option>
        <option>2</option>
        <option>3</option>
       </select>
     </td>
   </tr>
 </tbody>
 <tfoot>
  <button id="addRow">
    Add Row 
  </button>
 </tfoot>
</table>