Получение идентификатора элемента, вызвавшего событие
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли способ получить идентификатор элемента, который запускает событие?
Я думаю что-то вроде:
<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>
За исключением, конечно, того, что var test должен содержать идентификатор "aaa", если событие запускается из первой формы, и "bbb", если событие запускается из второй формы.
Решение
В 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");
});
});
Другие советы
Для справки, попробуйте это!Оно работает!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Хотя это упоминается в других сообщениях, я хотел бы уточнить это:
$(event.target).id не определено
$(event.target)[0].id дает атрибут id.
event.target.id также дает атрибут id.
this.id дает атрибут id.
и
$(this).id является неопределенным.
Различия, конечно же, заключаются между объектами jQuery и объектами DOM.«id» — это свойство DOM, поэтому для его использования вам необходимо находиться в объекте элемента DOM.
(Это сбило меня с толку, так что, вероятно, это сбило с толку кого-то еще)
Для всех событий, не ограничиваясь только jQuery, вы можете использовать
var target = event.target || event.srcElement;
var id = target.id
Где event.target терпит неудачу, он возвращается к event.srcElement для ИЕ.Чтобы уточнить, приведенный выше код не требует jQuery, но также работает с jQuery.
Вы можете использовать (this) для ссылки на объект, который запустил функцию.
'this' это ДОМ элемент, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызываясь щелчком мыши, каждым, привязкой и т. д.методы.
Здесь вы можете узнать больше: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Я динамически генерирую таблицу из базы данных, получаю данные в формате JSON и помещаю их в таблицу.Каждая строка таблицы имеет уникальный ID, который нужен для дальнейших действий, поэтому, если DOM изменен, нужен другой подход:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Элемент, в котором у нас есть инициированное событие событие свойство
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/
Исходный элемент как объект jQuery должен быть получен через
var $el = $(event.target);
Это дает вам источник щелчка, а не элемент, которому также была назначена функция щелчка.Может быть полезно, когда событие Click находится на родительском объекте, например, Click Event в строке таблицы, и вам нужна ячейка, которая была нажата
$("tr").click(function(event){
var $td = $(event.target);
});
Вы можете попробовать использовать:
$('*').live('click', function() {
console.log(this.id);
return false;
});
В случае с делегированными обработчиками событий у вас может быть что-то вроде этого:
<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() возвращает всех соответствующих потомков.
Использовать можно Использовать событие .on
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
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 здесь.
Это работает на более высоком уровне z-index чем параметр события, упомянутый в ответах выше:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
Таким образом, вы всегда получите id (в этом примере li) элемент.Также при нажатии на дочерний элемент родительского..
this.element.attr("id") в IE8 работает нормально.
И то и другое работает,
jQuery(this).attr("id");
и
alert(this.id);
Просто используйте this ссылка
$(this).attr("id")
или
$(this).prop("id")
Вы можете использовать эту функцию для получения идентификатора и значения измененного элемента (в моем примере я использовал тег Select.
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
это работает с большинством типов элементов:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
я работаю с
Автозаполнение jQuery
Я пытался найти event как описано выше, но когда функция запроса срабатывает, она кажется недоступной.я использовал this.element.attr("id") вместо этого получить идентификатор элемента, и, похоже, он работает нормально.
В случае 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>
