javascript - JQuery 为单击事件的 .on 监听器获取子选择器的值

Question

我正在设置一些 JS 以获取使用 JQuery .on() 事件处理程序在 div 中动态添加的单击项的 id 值。我目前的代码如下:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentDiv">
    <i id="test1">1</i>
    <i id="test2">2</i>
    <i id="test3">3</i>
</div>

<script>
$("#parentDiv").on('click', 'i[id^="test"]', function() {
    var child_id = $(this).id;
    child_id = child_id.replace("test","");
    alert(child_id);
});
</script>

<i>元素是动态添加的，因此我无法直接监听对它们的点击。似乎无法正常运行的区域是以下行: var child_id = $(this).id;它似乎不能完全正常工作或拉动 parent 的 id，而不是 child 的 id。是否有一个命令来获取被点击的子选择器，而不是父数据？

Answer 1

使用 .prop 或直接访问id不将元素包装在 jQuery 对象中(即 this.id )。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentDiv">
    <i id="test1">1</i>
    <i id="test2">2</i>
    <i id="test3">3</i>
</div>

<script>
$("#parentDiv").on('click', 'i[id^="test"]', function() {
    var child_id = $(this).prop('id');
    child_id = child_id.replace("test","");
    console.log($(this).prop('id'), this.id);
    console.log(child_id);
});
</script>