1057

有什么方法可以获取触发事件的元素的 ID？

我在想类似的事情：

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});
<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

当然 vartest应该包含 id "aaa"，如果事件是从第一种形式触发的，并且"bbb"，如果事件是从第二种形式触发的。

4

23 回答 23

1376

在 jQueryevent.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");
    });
});
于 2008-09-07T19:02:37.010 回答
183

供参考，试试这个！有用！

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
于 2010-09-02T08:01:42.957 回答
110

尽管在其他帖子中提到过，但我想说明一下：

$(event.target).id未定义

$(event.target)[0].id给出 id 属性。

event.target.id还给出了 id 属性。

this.id给出 id 属性。

和

$(this).id未定义。

当然，区别在于 jQuery 对象和 DOM 对象之间。“id”是一个 DOM 属性，因此您必须在 DOM 元素对象上才能使用它。

（它绊倒了我，所以它可能绊倒了其他人）

于 2012-11-06T13:38:16.900 回答
100

对于所有事件，不仅限于您可以使用的 jQuery

var target = event.target || event.srcElement;
var id = target.id

在event.target失败的地方，它又回到event.srcElement了 IE 上。澄清上面的代码不需要jQuery，但也适用于jQuery。

于 2012-07-19T14:23:14.450 回答
59

您可以使用(this)来引用触发该函数的对象。

'this'当您在回调函数（在 jQuery 的上下文中）内部时，它是一个DOM元素，例如，被 click、each、bind 等方法调用。

您可以在这里了解更多信息：http ://remysharp.com/2007/04/12/jquerys-this-demystified/

于 2008-09-07T08:12:38.790 回答
30

我从数据库中动态生成一个表，以 JSON 格式接收数据并将其放入一个表中。每个表行都有一个唯一的ID，这是进一步操作所必需的，因此，如果 DOM 被更改，您需要一种不同的方法：

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
于 2011-09-12T14:14:16.360 回答
22

事件属性中触发事件的元素

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/中阅读

于 2016-10-14T13:04:43.523 回答
13

应通过以下方式获取作为 jQuery 对象的源元素

var $el = $(event.target);

这将为您提供点击的来源，而不是点击功能也被分配的元素。当点击事件在父对象 EG 上时很有用。表格行上的点击事件，并且您需要被点击的单元格

$("tr").click(function(event){
    var $td = $(event.target);
});
于 2012-03-22T15:41:23.727 回答
12

这适用于大多数类型的元素：

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });
于 2018-10-18T19:28:09.550 回答
8

您可以尝试使用：

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
于 2012-11-03T17:40:44.633 回答
7

使用可以使用 .on 事件

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
于 2016-09-24T06:55:19.910 回答
6

在委托事件处理程序的情况下，您可能会遇到这样的情况：

<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 的内容包含在 a 中<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()）向下搜索。.first()使用时不需要使用.closest()，因为它只返回第一个匹配的祖先元素，而.find()返回所有匹配的后代。

于 2015-06-18T20:35:31.783 回答
5

这适用于高于z-index上述答案中提到的事件参数：

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

这样，您将始终获得id（在此示例中li）元素的 。同样，当单击父级的子元素时..

于 2013-11-09T19:58:29.707 回答
4 
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 。

于 2015-01-30T22:21:56.610 回答
4

只需使用this参考

$(this).attr("id")

或者

$(this).prop("id")
于 2016-08-04T08:51:05.527 回答
4 
$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})
于 2019-08-21T03:11:47.263 回答
3

this.element.attr("id")在 IE8 中运行良好。

于 2013-06-04T07:47:15.833 回答
2

这两项工作，

jQuery(this).attr("id");

和

alert(this.id);
于 2014-02-10T18:01:46.327 回答
2

纯JS更简单

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}


aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}
<form class="item" id="aaa">
  <input class="title"/>
</form>
<form class="item" id="bbb">
  <input class="title"/>
</form>

于 2020-06-26T20:26:46.940 回答
1

您可以使用该函数获取更改项目的 id 和值（在我的示例中，我使用了 Select 标签。

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
于 2018-02-05T11:23:13.923 回答
0

我正在与

jQuery 自动完成

event我尝试如上所述寻找一个，但是当请求函数触发时，它似乎不可用。我过去常常this.element.attr("id")获取元素的 ID，它似乎工作正常。

于 2018-11-11T17:39:34.980 回答
0

在 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>
于 2019-02-26T21:13:59.147 回答
0

已经有很多方法可以做到这一点和示例，但是如果您需要更进一步并需要防止表单上的输入键，但仍然需要在多行文本区域中使用它，它会变得更加复杂。以下将解决问题。

<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>

它可能会更简化，但你明白了这个概念。

于 2020-11-16T07:55:31.487 回答