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

javascript jquery

1123140 просмотра

20 ответа

5301 Репутация автора

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

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

<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 Источник Размещён: 07.09.2008 08:09

Ответы (20)


60 плюса

34362 Репутация автора

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

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

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

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

1184 плюса

47864 Репутация автора

Решение

В 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 плюса

1561 Репутация автора

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

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

26 плюса

261 Репутация автора

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

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

11 плюса

1906 Репутация автора

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

var $el = $(event.target);

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

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

76 плюса

3151 Репутация автора

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

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

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

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

8 плюса

111 Репутация автора

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

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

84 плюса

841 Репутация автора

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

$(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

3 плюса

2908 Репутация автора

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

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

4 плюса

373 Репутация автора

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

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

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

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

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

2 плюса

3298 Репутация автора

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

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

а также

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

4 плюса

2602 Репутация автора

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

7 плюса

846 Репутация автора

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

<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

2 плюса

497 Репутация автора

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

$(this).attr("id")

или же

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

5 плюса

451 Репутация автора

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

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

17 плюса

7316 Репутация автора

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

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

1 плюс

302 Репутация автора

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

1544 Репутация автора

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

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

0 плюса

807 Репутация автора

Я работаю с

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

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

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

0 плюса

6098 Репутация автора

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