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

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

887 голосов
/ 07 сентября 2008

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

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

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

Ответы [ 20 ]

1203 голосов
/ 07 сентября 2008

В 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");
    });
});
158 голосов
/ 02 сентября 2010

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

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
84 голосов
/ 06 ноября 2012

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

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

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

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

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

и

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

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

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

78 голосов
/ 19 июля 2012

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

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

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

59 голосов
/ 07 сентября 2008

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

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

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

25 голосов
/ 12 сентября 2011

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
16 голосов
/ 14 октября 2016

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

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/

10 голосов
/ 22 марта 2012

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

var $el = $(event.target);

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

$("tr").click(function(event){
    var $td = $(event.target);
});
7 голосов
/ 03 ноября 2012

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

$('*').live('click', function() {
 console.log(this.id);
 return false;
});
6 голосов
/ 18 июня 2015

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...