<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()事件以便将来兼容