获取触发事件的元素的ID-Java 学习之路

859

有没有办法获取触发事件的元素的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" .

19 回答

2
只需使用 this 参考
```
$(this).attr("id")
```
要么
```
$(this).prop("id")
```
回复于 2024-05-18T19:50:18+08:00
81
对于所有事件，不仅限于jQuery，您可以使用
```
var target = event.target || event.srcElement;
var id = target.id
```
在 event.target 失败的地方，它会回落到IE的 event.srcElement . 澄清上面的代码不需要jQuery，但也适用于jQuery .
回复于 2024-05-18T19:50:18+08:00
152
这适用于比上述答案中提到的事件参数更高的 z-index ：
```
$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});
```
这样，您将始终获得（在此示例中为 li ）元素的 id . 同时单击父元素的子元素时..
回复于 2024-05-18T19:50:18+08:00
59

我正在和我一起工作

jQuery自动完成

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

回复于 2024-05-18T19:50:18+08:00

您可以尝试使用：

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

回复于 2024-05-18T19:50:18+08:00

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 .

回复于 2024-05-18T19:50:18+08:00

1166
作为jQuery对象的source元素应该通过获取
```
var $el = $(event.target);
```
这将使您获得点击的来源，而不是点击功能也被分配的元素 . 当click事件在父对象EG.a表行上的单击事件上时，可能很有用，并且您需要单击的单元格
```
$("tr").click(function(event){
    var $td = $(event.target);
});
```
回复于 2024-05-18T19:50:18+08:00
1

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

$(event.target).id 未定义

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

event.target.id 也给出了id属性 .

this.id 给出了id属性 .

和

$(this).id 未定义 .

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

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

回复于 2024-05-18T19:50:18+08:00
0
我在数据库中动态生成一个表，以JSON接收数据并将其放入表中 . 每个表行都有一个唯一的 ID ，这是进一步操作所需要的，因此，如果DOM被更改，则需要采用不同的方法：
```
$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
```
回复于 2024-05-18T19:50:18+08:00
5

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

当你在一个回调函数（在jQuery的上下文中）时， 'this' 是一个 DOM 元素，例如，通过click，each，bind等方法调用 .

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

回复于 2024-05-18T19:50:18+08:00

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

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

回复于 2024-05-18T19:50:18+08:00

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

$('selector').on('click',function(e){
    log(event.currentTarget.id);
    });

回复于 2024-05-18T19:50:18+08:00

作为参考，试试这个！有用！

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

回复于 2024-05-18T19:50:18+08:00

使用可以使用.on事件

$("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

回复于 2024-05-18T19:50:18+08:00

2

this.element.attr("id") 在IE8中运行正常 .

回复于 2024-05-18T19:50:18+08:00

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

$('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

回复于 2024-05-18T19:50:18+08:00

74
在 event 属性中发射了事件的元素
```
event.currentTarget
```
我们得到 DOM node 对象，其中设置了事件处理程序 .

最开始冒泡过程的大多数嵌套节点
```
event.target
```
事件对象始终是事件处理程序的第一个属性，例如：
```
document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});
```
有关活动委派的更多信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/
回复于 2024-05-18T19:50:18+08:00
25
这两项工作，
```
jQuery(this).attr("id");
```
和
```
alert(this.id);
```
回复于 2024-05-18T19:50:18+08:00
4
在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");
    });
});
```
回复于 2024-05-18T19:50:18+08:00

获取触发事件的元素的ID

19 回答

相关问题