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

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

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

<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
источник поделиться
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
источник

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

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
+160
источник

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

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

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

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

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

а также

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

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

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

+88
источник

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

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

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

+79
источник

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

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

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

+59
источник

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
+26
источник

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

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
источник

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

var $el = $(event.target);

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

$("tr").click(function(event){
    var $td = $(event.target);
});
+11
источник

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

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
+7
источник

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

<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
источник

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

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

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

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

+5
источник

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

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

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

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

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

+3
источник

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

$(this).attr("id")

или

$(this).prop("id")
+3
источник

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

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

и

alert(this.id);
+2
источник

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

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
+1
источник

Я работаю с

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

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

0
источник

В случае 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
источник
$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})
0
источник

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