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

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

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

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

846
задан 07 сент. '08 в 11:09
источник поделиться
17 ответов

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

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

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
147
ответ дан 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 для его использования.

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

80
ответ дан 06 нояб. '12 в 16:38
источник

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

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

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

72
ответ дан 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/

15
ответ дан 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
источник

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

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
5
ответ дан 24 сент. '16 в 9:55
источник

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

<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() возвращает всех соответствующих потомков.

5
ответ дан 18 июня '15 в 23:35
источник
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
источник

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

$(this).attr("id")

или

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

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

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

и

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

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

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

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