JavaScript多選，移動到左邊，移動後選項點擊不工作

Question

我有問題。我有兩個有多個選項的列表。對於列表中任何選項的單擊事件，選項內包含的文本將打印在標籤上。問題是，當我執行移動（將元素移動到其他列表）時，click事件不再適用於列表中的新元素。

我已添加下面的代碼。感謝您的幫助。

<script> 
     function moveAll(from, to){ 
      $('#'+from+' option').remove().appendTo('#'+to);} 

     function moveSelected(from, to) { 
      $('#'+from+' option:selected').remove().appendTo('#'+to);} 
    </script> 

<b style="margin: 10px;">Our List</b> 

<select id="to" name="to[]" style="width:100px;" size="8" multiple="multiple"> 
</select> 

<a href="javascript:moveAll('from', 'to')" class="controls">&lt;&lt;</a> 
<a href="javascript:moveSelected('from', 'to')" class="controls">&lt;</a> 
<a href="javascript:moveSelected('to', 'from')" class="controls">&gt;</a> 
<a href="javascript:moveAll('to', 'from')" href="#" class="controls">&gt;&gt;</a> 

<b style="margin: 10px;">Other List</b> 

<select id="from" name="from[]" class="fromList" size="8" multiple="multiple"> 
    <option value="1">Item1</option> 
    <option value="3">Item 3</option> 
    <option value="2">Item 2</option> 
    <option value="x" disabled>Title</option> 
</select> 

<p id="Preview" class="Preview"></p> 
<script type="text/javascript"> 
$(function(){ 
    $("option").on("click", function(){ 
     $('#QuestionPreview').html($(this).text());   
    }); 
}); 
</script> 

Answer 1

您尚未在新創建的option元素上分配單擊事件處理程序。如果要將事件處理程序分配給將來出現的元素，可以將事件處理程序分配給已存在的父項（http://api.jquery.com/on）。

在你的情況，這應該工作：

$('body').on('click', 'option', function() { 
    $('#QuestionPreview').html($(this).text());   
}); 

我使用body缺乏一個更好的選項。理想情況下，它應該是您的#from和#to元素的共同父項元素。