如何使用 jQuery 获取已单击的 div 的 ID？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11248855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use jQuery get the ID of the div which has been clicked on?
提问by meli medo
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 值？
回答by digitaldreamer
I'm not sure why you're using $.proxy. Removing it should get you the desired results.
我不确定你为什么使用 $.proxy。删除它应该会得到你想要的结果。
$('.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));
回答by woemler
How about:
怎么样：
$('div').on('click', function(){
alert($(this).attr("id"));
});
Does this have to work only for divs with class status? If so, try:
这是否必须仅适用于具有 class 的 div status？如果是这样，请尝试：
$('div.status').on('click', function(){
alert($(this).attr("id"));
});
回答by Mark Schultheiss
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/
回答by pruthwiraj.kadam
$(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>回答by speedingdeer
$('selector').each(function(){
$(this).click(function(){
alert($(this).attr('id'))
});
});
回答by user2842836
Explanation of PROXY issue :
代理问题的解释：
Be carefull by using $.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.
使用 $.proxy() 时要小心。它使用指定的上下文（此处为参数 2）而不是使用触发事件的上下文来调用函数（此处为参数 1）。
In the main question, the specified context is $(document) so. 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).
在主要问题中，指定的上下文是 $(document) 所以。这样，函数会尝试获取文档的 ID，而不是触发事件的对象的 ID（$('.status') 元素）。
回答by Samarland
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:
JS：
var found = 0;
if ($('#uploadBody' + i).hide()) {
for (var i = 0; i < 5; i++) {
if (found == 0) {
$('#uploadBody' + i).show();
}
found++;
}
}
