获取触发事件的元素的ID

javascript jquery

1123140 观看

20回复

5301 作者的声誉

有没有办法获取触发事件的元素的ID?

我想的是:

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

当然除了var test应该包含id "aaa",如果从第一个表单触发事件,并且"bbb"如果事件是从第二个表单触发的话。

作者: Joda 的来源 发布者: 2008 年 9 月 7 日

回应 (20)


60

34362 作者的声誉

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

'this'当你在一个回调函数(在jQuery的上下文中)时,是一个DOM元素,例如,由click,each,bind等方法调用。

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

作者: Espo 发布者: 07.09.2008 08:12

1184

47864 作者的声誉

决定

在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");
    });
});
作者: samjudson 发布者: 07.09.2008 07:02

156

1561 作者的声誉

作为参考,试试吧!有用!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
作者: Gemma 发布者: 02.09.2010 08:01

26

261 作者的声誉

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
作者: SMut 发布者: 12.09.2011 02:14

11

1906 作者的声誉

作为jQuery对象的source元素应该通过获取

var $el = $(event.target);

这将使您获得点击的来源,而不是点击功能也被分配的元素。当click事件在父对象EG.a表行上的click事件上,并且您需要单击的单元格时,这可能很有用

$("tr").click(function(event){
    var $td = $(event.target);
});
作者: Morvael 发布者: 22.03.2012 03:41

76

3151 作者的声誉

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

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

如果event.target失败,它将落后于event.srcElementIE。澄清上面的代码不需要jQuery,但也适用于jQuery。

作者: Ally 发布者: 19.07.2012 02:23

8

111 作者的声誉

您可以尝试使用:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
作者: Darius 发布者: 03.11.2012 05:40

84

841 作者的声誉

虽然在其他帖子中提到过,但我想拼出这个:

$(event.target).id 未定义

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

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

this.id 给出id属性。

$(this).id 未定义。

当然,差异在于jQuery对象和DOM对象。“id”是一个DOM属性,因此您必须在DOM元素对象上才能使用它。

(它绊倒了我,所以它可能绊倒了别人)

作者: dsch 发布者: 06.11.2012 01:38

3

2908 作者的声誉

this.element.attr("id") 在IE8中工作正常。

作者: Gilly 发布者: 04.06.2013 07:47

4

373 作者的声誉

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

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

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

这样,您将始终获得id(在此示例中li)元素。同时单击父元素的子元素时..

作者: Marcel Verwey 发布者: 09.11.2013 07:58

2

3298 作者的声誉

这两项工作,

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

alert(this.id);
作者: Moji 发布者: 10.02.2014 06:01

4

2602 作者的声誉

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 。

作者: shmuli 发布者: 30.01.2015 10:21

7

846 作者的声誉

在委派事件处理程序的情况下,您可能会遇到以下情况:

<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()返回所有匹配的后代。

作者: Isochronous 发布者: 18.06.2015 08:35

2

497 作者的声誉

只需使用this参考

$(this).attr("id")

要么

$(this).prop("id")
作者: Error404 发布者: 04.08.2016 08:51

5

451 作者的声誉

使用可以使用.on事件

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
作者: Basant Rules 发布者: 24.09.2016 06:55

17

7316 作者的声誉

事件财产中解雇了事件的元素

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/

作者: Maciej Sikora 发布者: 14.10.2016 01:04

1

302 作者的声誉

您可以使用该函数来获取已更改项目的ID和值(在我的示例中,我使用了Select标记。

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
作者: xeon 发布者: 05.02.2018 11:23

1

1544 作者的声誉

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

$('selector').on('click',function(e){
    log(event.currentTarget.id);
    });
作者: Cris 发布者: 18.10.2018 07:28

0

807 作者的声誉

我正在和我一起工作

jQuery自动完成

我尝试了event如上所述的查找,但是当请求函数触发时,它似乎不可用。我过去常常this.element.attr("id")得到元素的ID,它似乎工作得很好。

作者: DAB 发布者: 11.11.2018 05:39

0

6098 作者的声誉

对于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>
作者: David Dehghan 发布者: 26.02.2019 09:13
32x32