Получение идентификатора элемента, который инициировал событие

Есть ли способ получить идентификатор элемента, который запускает событие?

Я думаю, что-то вроде:

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

За исключением, конечно, что test var должен содержать идентификатор "aaa", если событие запускается из первой формы и "bbb", если событие запускается из второй формы.

886
07 сент. '08 в 11:09
источник поделиться
20 ответов

В 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");
    });
});
1200
07 сент. '08 в 22:02
источник

Для справки попробуйте это! Он работает!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
158
02 сент. '10 в 11:01
источник

Хотя это упоминается в других сообщениях, я хотел бы сказать следующее:

$(event.target).id не определено

$(event.target)[0].id дает атрибут id.

event.target.id также дает атрибут id.

this.id указывает атрибут id.

а также

$(this).id не определено.

Различия, конечно, заключаются между объектами jQuery и объектами DOM. "id" - это свойство DOM, поэтому вы должны быть на объекте элемента DOM для его использования.

(Это сбило меня с толку, так что, вероятно, он сработал кто-то другой)

84
06 нояб. '12 в 16:38
источник

Для всех событий, не ограничиваясь только jQuery, вы можете использовать

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

Где event.target не работает, он возвращается на event.srcElement для IE. Для уточнения вышеуказанного кода не требуется jQuery, но также работает с jQuery.

78
19 июля '12 в 17:23
источник

Вы можете использовать (this) для ссылки на объект, который запускал функцию.

'this' является элементом DOM, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызывая методы click, each, bind и т.д.

Здесь вы можете узнать больше: http://remysharp.com/2007/04/12/jquerys-this-demystified/

59
07 сент. '08 в 11:12
источник

Я генерирую таблицу динамически из базы данных, получаю данные в JSON и помещаю ее в таблицу. Каждая строка таблицы получила уникальный ID, который необходим для дальнейших действий, поэтому, если DOM изменен, вам нужен другой подход:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
25
12 сент. '11 в 17:14
источник

Элемент, который активировал событие, которое мы имеем в событии.

event.currentTarget

Мы получаем объект DOM node, на который был установлен обработчик событий.


Наиболее вложенные 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/

16
14 окт. '16 в 16:04
источник

Исходный элемент как объект jQuery должен быть получен через

var $el = $(event.target);

Это дает вам источник щелчка, а не элемент, которому была назначена функция щелчка. Может быть полезно, когда событие click находится на родительском объекте EG.a щелкните событие в строке таблицы, и вам понадобится ячейка, на которую была нажата кнопка

$("tr").click(function(event){
    var $td = $(event.target);
});
10
22 марта '12 в 18:41
источник

Вы можете попробовать:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
7
03 нояб. '12 в 20:40
источник

В случае делегированных обработчиков событий, где у вас может быть что-то вроде этого:

<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()), чтобы выполнить поиск по нему. Вам не нужно использовать .first() при использовании .closest(), так как он возвращает только первый соответствующий элемент предка, а .find() возвращает всех соответствующих потомков.

6
18 июня '15 в 23:35
источник

Использование может использовать .on event

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
5
24 сент. '16 в 9:55
источник
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 здесь.

4
31 янв. '15 в 1:21
источник

Это работает с более высоким z-index, чем параметр события, упомянутый в приведенных выше ответах:

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

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

Таким образом вы всегда получите id элемента (в этом примере li). Также при нажатии на дочерний элемент родителя.

4
09 нояб. '13 в 22:58
источник

this.element.attr("id") отлично работает в IE8.

3
04 июня '13 в 10:47
источник

Обе эти работы,

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

и

alert(this.id);
2
10 февр. '14 в 21:01
источник

Просто используйте ссылку this

$(this).attr("id")

или

$(this).prop("id")
2
04 авг. '16 в 11:51
источник

это работает с большинством типов элементов:

$('selector').on('click',function(e){
    log(event.currentTarget.id);
    });
1
18 окт. '18 в 22:28
источник

Вы можете использовать эту функцию для получения идентификатора и значения для измененного элемента (в моем примере я использовал тег Select.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
1
05 февр. '18 в 14:23
источник

Я работаю с

JQuery Автозаполнение

Я пытался найти event как описано выше, но когда срабатывает функция запроса, она кажется недоступной. Я использовал this.element.attr("id") чтобы получить идентификатор элемента, и он, кажется, работает нормально.

0
11 нояб. '18 в 20:39
источник

В случае Angular 7.x вы можете получить нативный элемент и его идентификатор или свойства.

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>
0
27 февр. '19 в 0:13
источник

Посмотрите другие вопросы по меткам или Задайте вопрос