如何使用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中存在的span将具有不同的id，因为我将使用jquery ajax从模型（MVC）加载span。所以会有'n'个跨度。所有跨度都将具有唯一ID。我想得到我点击的跨度的id。

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

Answer 1

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

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

Answer 2

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

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

您需要将事件附加到最近的静态成员，以提高效率。

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

例如，

比绑定到文档更好。

这个问题可能有助于您理解

Direct vs. Delegated - jQuery .on()

Answer 3

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

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

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

Answer 4

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

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

使用.on()事件以便将来兼容