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

Ответ 1

В 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");
    });
});

Ответ 2

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

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

Ответ 3

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

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

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

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

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

а также

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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/

Ответ 8

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

var $el = $(event.target);

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

$("tr").click(function(event){
    var $td = $(event.target);
});

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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

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

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

Ответ 12

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

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

Ответ 13

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 здесь.

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

$(this).attr("id")

или

$(this).prop("id")

Ответ 17

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

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

и

alert(this.id);

Ответ 18

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

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

Ответ 19

Я работаю с

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

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

Ответ 20

В случае 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>

Ответ 21

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})