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

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

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

<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", если событие запускается из второй формы.

+907
07 сент. '08 в 8:09
источник поделиться
21 ответ

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

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

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

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

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

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

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

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

а также

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

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

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

+88
06 нояб. '12 в 13:38
источник

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

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

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

+79
19 июл. '12 в 14:23
источник

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

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

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

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

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
+26
12 сент. '11 в 14: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 в 13:04
источник

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

var $el = $(event.target);

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

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

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

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
+7
03 нояб. '12 в 17: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 в 20:35
источник

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

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

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

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

+5
09 нояб. '13 в 19:58
источник

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

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

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

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

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

+3
04 июн. '13 в 7:47
источник

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

$(this).attr("id")

или

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

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

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

и

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

Вы можете использовать эту функцию для получения идентификатора и значения для измененного элемента (в моем примере я использовал тег 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 в 11:23
источник

Я работаю с

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

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

0
11 нояб. '18 в 17: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
26 февр. '19 в 21:13
источник
$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})
0
21 авг. '19 в 3:11
источник

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