如何使用jQuery获取元素的id

时间:2022-05-12 09:18:13
<div class="main_div">
    <div id="inner_div">    
        <span id="d1" class="get_clicked">click to get id</span>
    </div>
</div>

How to get the id of the clicked element? The span which is present inside the inner_div will be having different ids because I will be loading the span from the model(MVC) using jquery ajax. So there will be 'n' number of span. All the span will have unique id. I want to get the id of the span which I click.

如何获取被点击元素的id? inner_div中存在的span将具有不同的id,因为我将使用jquery ajax从模型(MVC)加载span。所以会有'n'个跨度。所有跨度都将具有唯一ID。我想得到我点击的跨度的id。

How the get the id of the span when clicked? How to do this using jQuery?

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

4 个解决方案

#1


44  

update as you loading contents dynamically so you use.

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

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

old code

旧代码

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

or you can use .on

或者你可以使用.on

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

this refers to current span element clicked

这是指点击的当前span元素

this.id will give the id of the current span clicked

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

#2


10  

Since you are loading in the spans via ajax you will have to attach delegate handlers to the events to catch them as they bubble up.

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

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

you will want to attach the event to the closest static member you can to increase efficiency.

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

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

is better than binding to the document for instance.

例如,比绑定到文档更好。

This question may help you understand

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

Direct vs. Delegated - jQuery .on()

直接与委派 - jQuery .on()

#3


1  

I wanted to share how you can use this to change a attribute of the button, because it took me some time to figure it out...

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

For example in order to change it's background to yellow:

例如,为了将背景更改为黄色:

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

#4


0  

You can get the id of clicked one by this code

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

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

Use .on() event for future compatibility

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

#1


44  

update as you loading contents dynamically so you use.

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

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

old code

旧代码

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

or you can use .on

或者你可以使用.on

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

this refers to current span element clicked

这是指点击的当前span元素

this.id will give the id of the current span clicked

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

#2


10  

Since you are loading in the spans via ajax you will have to attach delegate handlers to the events to catch them as they bubble up.

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

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

you will want to attach the event to the closest static member you can to increase efficiency.

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

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

is better than binding to the document for instance.

例如,比绑定到文档更好。

This question may help you understand

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

Direct vs. Delegated - jQuery .on()

直接与委派 - jQuery .on()

#3


1  

I wanted to share how you can use this to change a attribute of the button, because it took me some time to figure it out...

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

For example in order to change it's background to yellow:

例如,为了将背景更改为黄色:

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

#4


0  

You can get the id of clicked one by this code

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

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

Use .on() event for future compatibility

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