2

我正在设置一些 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;它似乎无法完全正常工作或拉动父母的身份，而不是孩子的身份。是否有命令获取被点击的子选择器，而不是父数据？

4

2 回答 2

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>

于 2021-01-08T22:11:58.637 回答
1

使用attr()方法：

var child_id = $(this).attr('id');


$("#parentDiv").on('click', 'i[id^="test"]', function() {
    var child_id = $(this).attr('id');
    child_id = child_id.replace("test","");
    alert(child_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>

于 2021-01-08T22:12:09.790 回答