$（this）在委托事件处理程序中未选择子元素

Question

我有一个带有动态创建选项的select元素：

$("#parent-id").append($('<option class="child-class" value="option1"> Option1 </option>'))

$("#parent-id").append($('<option class="child-class" value="option2"> Option2 </option>'))

//Try replacing ".child-class" with $(".child-class")
$("#parent-id").on("mouseover" , ".child-class" ,function(){
    var selectedOption = $(this).val();
    console.log(selectedOption)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="parent-id">

</select>

我想在鼠标悬停时获取每个选项的值，并运行一个使用该值做某事的函数：

$("#parent-id").on("mouseover" , $(".child-class") ,function(){
    var selectedOption = $(this).val();
    console.log(selectedOption)
})

但是现在，selectedOption是父元素（“ select”）的值，而不是子元素（“ option”）的值！

如何更改代码以获得选项元素的值？

更新：添加了代码段。如果我使用“ .child-class”代替$（“。child-class”），则什么都不会发生！