JavaScript多选，左右移动，选项移动后单击不工作

我有个问题。我有两个带有多个选项的列表。对于列表中任何选项的单击事件，包含在选项中的文本将打印在标签上。问题是，当我将一个元素移动到其他列表时，单击事件不再对列表中的新元素起作用

我在下面添加了代码。谢谢你的帮助

    <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>

---

您尚未为新创建的选项元素分配单击事件处理程序。如果要将事件处理程序分配给将来出现的元素，可以将事件处理程序分配给已存在的父级

在您的情况下，这应该有效：

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

---

我使用身体是因为没有更好的选择。理想情况下，它应该是from和to元素的共同父元素。

欢迎您。如果答案有帮助，你能把它标为完成了吗？