jquery - 如何获取使用jQuery单击的元素的ID

Question

<div class="main_div">
    <div id="inner_div">    
        <span id="d1" class="get_clicked">click to get id</span>
    </div>
</div>

如何获取被点击元素的id？inner_div 中存在的跨度将具有不同的 ID，因为我将使用 jquery ajax 从模型（MVC）加载跨度。所以会有'n'个跨度。所有跨度都将具有唯一的 ID。我想获取我单击的跨度的 id。

单击时如何获取跨度的ID？如何使用 jQuery 做到这一点？

score 50 · Accepted Answer

在动态加载内容时更新，以便您使用。

$(document).on('click', 'span', function () {
    alert(this.id);
});

旧代码

$('span').click(function(){
    alert(this.id);
});

或者你可以使用.on

$('span').on('click', function () {
    alert(this.id);
});

this指当前点击的 span 元素

this.id将给出id当前跨度的点击

score 10 · Accepted Answer

由于您正在通过 ajax 加载跨度，因此您必须将委托处理程序附加到事件以在它们冒泡时捕获它们。

$(document).on('click','span',function(e){
    console.log(e.target.id)
})

您将希望将事件附加到最接近的静态成员以提高效率。

$('#main_div').on('click','span',function(e){
    console.log(e.target.id)
})

例如，比绑定到文档要好。

这个问题可以帮助你理解

score 1 · Accepted Answer

我想分享如何使用它来更改按钮的属性，因为我花了一些时间才弄清楚......

例如，为了将其背景更改为黄色：

$("#"+String(this.id)).css("background-color","yellow");

score 0 · Accepted Answer

您可以通过此代码获取点击的 id

$("span").on("click",function(e){
    console.log(e.target.Id);
});

使用.on()事件以实现未来兼容性

4 回答 4