如何使用 jQuery 获取被点击的 div 的 ID？
[英]How do I use jQuery get the ID of the div which has been clicked on?
问题描述
I need to get the ID of the clicked-on div.
我需要获取点击的 div 的 ID。
Now when I click on status class I an returned undefined id.现在，当我单击状态类时，我返回了一个未定义的 ID。
Here is my javascript code这是我的javascript代码
jQuery(document).ready(function() {
$(".status").bind('click', $.proxy(function() {
var status = $(this).attr('id');
alert(status);
}, this));
});
and HTML和HTML
<div class="status" id="s_1">111111</div>
<div class="status" id="s_3">33333</div>
<div class="status" id="s_2">222222</div>
How should I get the correct id value?我应该如何获得正确的 id 值？
7 个解决方案
解决方案1
27 2012-06-28 16:26:04
I'm not sure why you're using $.proxy.我不确定您为什么使用 $.proxy。 Removing it should get you the desired results.删除它应该会得到你想要的结果。
$('.status').click(function(event) {
var status = $(this).attr('id');
});
If you still want to use proxy you can access the clicked element through event.currentTarget如果你仍然想使用代理，你可以通过event.currentTarget访问被点击的元素
$(".status").bind('click', $.proxy(function(event) {
var status = $(event.currentTarget).attr('id');
alert(status);
}, this));
解决方案2
5 2012-06-28 16:27:15
How about:怎么样：
$('div').on('click', function(){
alert($(this).attr("id"));
});
Does this have to work only for divs with class status ?这是否只适用于具有类status的 div？ If so, try:如果是这样，请尝试：
$('div.status').on('click', function(){
alert($(this).attr("id"));
});
解决方案3
2 2012-06-28 16:31:44
use event.target to reference that element使用 event.target 来引用该元素
jQuery(document).ready(function() {
$(".status").bind('click', $.proxy(function(event) {
var status = $(event.target).attr('id');
alert(status);
}, this));
});
see in action: http://jsfiddle.net/vNaqR/实际操作：http: //jsfiddle.net/vNaqR/
解决方案4
1 2017-07-19 08:51:51
$(document).ready(function() { $(".divField").click(function() { alert("id: " + $(this).attr("id")); }); });
<:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <h1>For finding id click below text</h1> <div id="id1" value="Example 1" class="divField">My id is <b>id1</b></div> <div id="id2" value="Example 2" class="divField">My id is <b>id2</b></div> </body> </html>
解决方案5
0 2013-06-06 07:23:18
$('selector').each(function(){
$(this).click(function(){
alert($(this).attr('id'))
});
});
解决方案6
0 2013-10-03 13:15:47
Explanation of PROXY issue: PROXY问题说明：
Be carefull by using $.proxy().使用 $.proxy() 时要小心。 It calls a function (here the parameter 1) using the specified context (here the parameter 2) instead of using the context in which the event is triggered.它使用指定的上下文（此处为参数 2）而不是使用触发事件的上下文来调用函数（此处为参数 1）。
In the main question, the specified context is $(document) so.在主要问题中，指定的上下文是 $(document) 所以。 In this way, the function try to get the ID of the document instead of the ID of the object on which the event is triggered (the $('.status') element).通过这种方式，该函数尝试获取文档的 ID，而不是触发事件的对象（$('.status') 元素）的 ID。
解决方案7
0 2017-03-24 16:00:22
I'm trying to display the hidden div when I click on the button,then every time user click on button display more indexes.我试图在单击按钮时显示隐藏的 div，然后每次用户单击按钮时显示更多索引。
That's not working since on the list is always empty if I'm on the add mode not edit(display the div when it's edit)这是行不通的，因为如果我处于添加模式而不是编辑状态，则列表始终为空（编辑时显示 div）
<li>
<button type="button" name="addAnotherButton" class="btnFwd gradient smButtonStyling"
onClick="showInput();">
<img src="/Common/web/static/images/add.png" class="smbtnIcon" />
Add Another
</button>
</li>
<li>
<c:forEach items="${planInfoList}" var="planInfo" varStatus="status">
<div id="uploadBody[${status.index}]" style='display = none'>
<label class="adminFormLabel">Title:</label>
<form:input path="planInfoList[${status.index}].title" onfocus="this.select();" maxlength="50" size="30"/>
<label class="adminFormLabel">Plan Number:</label>
<form:input path="planInfoList[${status.index}].planNumber" size="10" maxlength="10"/>
</div>
</c:forEach>
</li>
JS:记者：
var found = 0;
if ($('#uploadBody' + i).hide()) {
for (var i = 0; i < 5; i++) {
if (found == 0) {
$('#uploadBody' + i).show();
}
found++;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.