有什么方法可以获取触发事件的元素的 ID?
我在想类似的事情:
$(document).ready(function() { $("a").click(function() { var test = caller.id; alert(test.val()); }); });
当然,如果事件是从第一种形式触发的,则 var test
应该包含 id "aaa"
,如果事件是从第二种形式触发的,则应包含 "bbb"
。
event.target.id
来获取触发事件的元素的 ID。
event
作为 单击回调函数中的参数,然后使用 event.target.id
在 jQuery 中,event.target
总是指触发事件的元素,其中 event
是传递给函数的参数。 http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
另请注意,this
也可以使用,但它不是 jQuery 对象,因此如果您希望在其上使用 jQuery 函数,则必须将其称为 $(this)
,例如:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
供参考,试试这个!有用!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
$(this).attr("id");
可以。
e.target
将为您提供导致事件被触发的确切元素,即使它是一个子元素,而 this
将为您提供该事件的元素附在。
尽管在其他帖子中提到过,但我想说明一下:
$(event.target).id
未定义
$(event.target)[0].id
给出 id 属性。
event.target.id
还给出了 id 属性。
this.id
给出 id 属性。
和
$(this).id
未定义。
当然,区别在于 jQuery 对象和 DOM 对象之间。 “id”是一个 DOM 属性,因此您必须在 DOM 元素对象上才能使用它。
(它绊倒了我,所以它可能绊倒了其他人)
event.target.id
什么都没有!
$(event.target).attr('selector');
非常适合我。
对于所有事件,不仅限于您可以使用的 jQuery
var target = event.target || event.srcElement;
var id = target.id
如果 event.target
失败,它会退回到 IE 的 event.srcElement
。澄清上面的代码不需要jQuery,但也适用于jQuery。
您可以使用 (this)
来引用触发该函数的对象。
'this'
是一个 DOM 元素,当您在回调函数内部时(在 jQuery 的上下文中),例如,被 click、each、bind 等方法调用。
您可以在此处了解更多信息:http://remysharp.com/2007/04/12/jquerys-this-demystified/
$(html).click()
(this)这样的函数,将返回 html 对象而不是点击的元素
我从数据库中动态生成一个表,以 JSON 格式接收数据并将其放入一个表中。每个表格行都有一个唯一的 ID
,这是进一步操作所必需的,因此,如果 DOM 被更改,您需要一种不同的方法:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
事件属性中触发事件的元素
event.currentTarget
我们得到设置了事件处理程序的 DOM 节点对象。
开始冒泡过程的大多数嵌套节点
event.target
事件对象始终是事件处理程序的第一个属性,例如:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
有关事件委托的更多信息您可以在 http://maciejsikora.com/standard-events-vs-event-delegation/ 中阅读
应通过以下方式获取作为 jQuery 对象的源元素
var $el = $(event.target);
这将为您提供点击的来源,而不是点击功能也被分配的元素。当点击事件在父对象 EG 上时很有用。表格行上的点击事件,并且您需要被点击的单元格
$("tr").click(function(event){
var $td = $(event.target);
});
这适用于大多数类型的元素:
$('selector').on('click',function(e){
log(e.currentTarget.id);
});
您可以尝试使用:
$('*').live('click', function() {
console.log(this.id);
return false;
});
使用可以使用 .on 事件
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
在委托事件处理程序的情况下,您可能会遇到这样的情况:
<ul>
<li data-id="1">
<span>Item 1</span>
</li>
<li data-id="2">
<span>Item 2</span>
</li>
<li data-id="3">
<span>Item 3</span>
</li>
<li data-id="4">
<span>Item 4</span>
</li>
<li data-id="5">
<span>Item 5</span>
</li>
</ul>
你的JS代码是这样的:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
});
您很可能会发现 itemId 是 undefined
,因为 LI 的内容包含在 <span>
中,这意味着 <span>
可能是事件目标。你可以通过一个小检查来解决这个问题,如下所示:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
itemId = $target.data('id');
//do something with itemId
});
});
或者,如果您希望最大限度地提高可读性(同时避免不必要的 jQuery 包装调用重复):
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId;
$target = $target.is('li') ? $target : $target.closest('li');
itemId = $target.data('id');
//do something with itemId
});
});
使用事件委托时,.is()
方法对于验证您的事件目标(除其他外)是否确实是您所需要的非常宝贵。使用 .closest(selector)
向上搜索 DOM 树,并使用 .find(selector)
(通常与 .first()
结合,如 .find(selector).first()
)向下搜索。使用 .closest()
时不需要使用 .first()
,因为它只返回第一个匹配的祖先元素,而 .find()
返回所有匹配的后代。
这适用于比上述答案中提到的事件参数更高的 z-index
:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
这样,您将始终获得(在本例中为 li
)元素的 id
。同样,当单击父级的子元素时..
var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
// do something based on button selection here...
alert(this.id);
}
工作 JSFiddle here。
只需使用 this
参考
$(this).attr("id")
或者
$(this).prop("id")
click()
的元素中获取属性 id
。如果您需要将更多数据传输到该方法,则需要 data-some-id="<?php $someId; ?>"
然后您可以 `$(this).data("some-id") 来检索它。
$(".classobj").click(function(e){
console.log(e.currentTarget.id);
})
this.element.attr("id")
在 IE8 中运行良好。
这两项工作,
jQuery(this).attr("id");
和
alert(this.id);
纯JS更简单
aaa.onclick = handler;
bbb.onclick = handler;
function handler() {
var test = this.id;
console.log(test)
}
aaa.onclick = 处理程序; bbb.onclick = 处理程序;函数 handler() { var test = this.id; console.log(test) }
您可以使用该函数获取更改项目的 id 和值(在我的示例中,我使用了 Select 标签。
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
我正在与
jQuery 自动完成
如上所述,我尝试查找 event
,但是当请求函数触发时,它似乎不可用。我使用 this.element.attr("id")
来获取元素的 ID,它似乎工作正常。
在 Angular 7.x 的情况下,您可以获得本机元素及其 id 或属性。
myClickHandler($event) {
this.selectedElement = <Element>$event.target;
console.log(this.selectedElement.id)
this.selectedElement.classList.remove('some-class');
}
html:
<div class="list-item" (click)="myClickHandler($event)">...</div>
已经有很多方法可以做到这一点和示例,但是如果您需要更进一步并且需要防止表单上的输入键,但仍然需要在多行文本区域中使用它,它会变得更加复杂。以下将解决问题。
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
//There are 2 textarea forms that need the enter key to work.
if((event.target.id=="CommentsForOnAir") || (event.target.id=="CommentsForOnline"))
{
// Prevent the form from triggering, but allowing multi-line to still work.
}
else
{
event.preventDefault();
return false;
}
}
});
});
</script>
<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>
它可能会更简化,但你明白了这个概念。
不定期副业成功案例分享
$(event.target).attr("organisation:thingy");
,您可以使用$(event.target)
。