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

javascript jquery

1123140 просмотра

20 ответа

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

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

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

Автор: Joda Источник Размещён: 17.05.2019 02:57

Ответы (20)


1184 плюса

Решение

В 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");
    });
});
Автор: samjudson Размещён: 07.09.2008 07:02

156 плюса

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

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
Автор: Gemma Размещён: 02.09.2010 08:01

84 плюса

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

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

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

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

this.id дает атрибут id.

а также

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

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

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

Автор: dsch Размещён: 06.11.2012 01:38

76 плюса

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

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

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

Автор: Ally Размещён: 19.07.2012 02:23

60 плюса

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

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

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

Автор: Espo Размещён: 07.09.2008 08:12

26 плюса

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
Автор: SMut Размещён: 12.09.2011 02:14

17 плюса

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

event.currentTarget

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


Самый вложенный узел, который начал процесс барботирования, который мы имеем в

event.target

Объект события всегда является первым атрибутом обработчика события, например:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

Подробнее о делегировании мероприятия вы можете прочитать в http://maciejsikora.com/standard-events-vs-event-delegation/

Автор: Maciej Sikora Размещён: 14.10.2016 01:04

11 плюса

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

var $el = $(event.target);

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

$("tr").click(function(event){
    var $td = $(event.target);
});
Автор: Morvael Размещён: 22.03.2012 03:41

8 плюса

Вы можете попробовать использовать:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
Автор: Darius Размещён: 03.11.2012 05:40

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

Автор: Isochronous Размещён: 18.06.2015 08:35

5 плюса

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

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
Автор: Basant Rules Размещён: 24.09.2016 06:55

4 плюса

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

Автор: shmuli Размещён: 30.01.2015 10:21

4 плюса

Это работает с параметром выше, z-indexчем в ответах выше:

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

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

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

Автор: Marcel Verwey Размещён: 09.11.2013 07:58

3 плюса

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

Автор: Gilly Размещён: 04.06.2013 07:47

2 плюса

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

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

а также

alert(this.id);
Автор: Moji Размещён: 10.02.2014 06:01

2 плюса

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

$(this).attr("id")

или же

$(this).prop("id")
Автор: Error404 Размещён: 04.08.2016 08:51

1 плюс

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

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
Автор: xeon Размещён: 05.02.2018 11:23

1 плюс

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

$('selector').on('click',function(e){
    log(event.currentTarget.id);
    });
Автор: Cris Размещён: 18.10.2018 07:28

0 плюса

Я работаю с

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

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

Автор: DAB Размещён: 11.11.2018 05:39

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>
Автор: David Dehghan Размещён: 26.02.2019 09:13
Вопросы из категории :
32x32