11

Получение ID элемента, вызвавшего событие

16

Вопрос: Как получить ID элемента, который вызывает событие?

Я ищу способ получить ID элемента, который инициирует событие.

Например, у меня есть следующий код:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

И соответствующий HTML:

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

Однако, переменная test должна содержать ID "aaa" в случае, если событие вызывается из первой формы, и "bbb" в случае, если событие вызывается из второй формы.

Как можно реализовать это поведение?

5 ответ(ов)

14

В jQuery event.target всегда ссылается на элемент, который вызвал событие, где event — это параметр, передаваемый функции. Вы можете найти дополнительную информацию в документации jQuery.

Вот пример:

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Обратите внимание, что this также будет работать, но это не jQuery-объект. Если вы хотите использовать функцию jQuery для этого элемента, вам нужно обратиться к нему как $(this). Например:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append не будет работать
        $(this).append(" Clicked");
    });
});

Таким образом, если вы хотите использовать методы jQuery, не забудьте обернуть this в $().

1

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

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

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

1

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

$(event.target).id // возвращает undefined
$(event.target)[0].id // возвращает значение атрибута id
event.target.id // также возвращает значение атрибута id
this.id // возвращает значение атрибута id

А вот:

$(this).id // возвращает undefined

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

Меня это запутало, поэтому, возможно, это будет полезно и другим.

1

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

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

В случае, если event.target не сработает, код вернется к event.srcElement для поддержки Internet Explorer. Чтобы прояснить, приведенный выше код не требует jQuery, но также может использоваться с ним.

0

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

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

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

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь