Получение идентификатора элемента, который вызвал событие
Есть ли способ получить идентификатор элемента, который инициирует событие?
Я думаю что-то вроде:
<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", если событие вызывается из второй формы.
24 ответа
В 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 для IE. Для пояснения приведенного выше кода не требуется jQuery, но также работает с jQuery.
Ты можешь использовать (this) ссылаться на объект, который вызвал функцию.
'this' является элементом DOM, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызывается методами click, each, bind и т. д.
Здесь вы можете узнать больше: 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 находится в родительском объекте EG.a событие click в строке таблицы, и вам нужна ячейка, по которой щелкнули
$("tr").click(function(event){
var $td = $(event.target);
});
Это работает с большинством типов элементов:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
Вы можете попробовать использовать:
$('*').live('click', function() {
console.log(this.id);
return false;
});
Использовать можно Использовать.on событие
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
В случае делегированных обработчиков событий, у вас может быть что-то вроде этого:
<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() возвращает всех соответствующих потомков.
Это работает на высшем z-index чем параметр события, упомянутый в ответах выше:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
Таким образом, вы всегда получите id из (в этом примере li) элемент. Также при нажатии на дочерний элемент родительского элемента.
$(".classobj").click(function(e){
console.log(e.currentTarget.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 здесь.
Просто используйте this ссылка
$(this).attr("id")
или же
$(this).prop("id")
Просто вы можете использовать либо:
$(this).attr("id");
Или
$(event.target).attr("id");
Но$(this).attr("id")вернет идентификатор элемента, к которому прикреплен прослушиватель событий.
Принимая во внимание, что когда мы используем это, мы возвращаем идентификатор элемента, по которому щелкнули.
Например, если у нас есть элемент, то, если мы нажмем «div», будет возвращен идентификатор<div>, если мы нажмем на «p», то$(event.target).attr("id")вернет идентификатор<p>.
Так что используйте его в соответствии с вашими потребностями.
Чистый JS проще
aaa.onclick = handler;
bbb.onclick = handler;
function handler() {
var test = this.id;
console.log(test)
}
aaa.onclick = handler;
bbb.onclick = handler;
function handler() {
var test = this.id;
console.log(test)
}<form class="item" id="aaa">
<input class="title"/>
</form>
<form class="item" id="bbb">
<input class="title"/>
</form>Обе эти работы,
jQuery(this).attr("id");
а также
alert(this.id);
Вы можете использовать функцию, чтобы получить идентификатор и значение для измененного элемента (в моем примере я использовал тег Select.
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(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>
Я работаю с
JQuery Автозаполнение
Я пытался найти event как описано выше, но когда функция запроса срабатывает, она кажется недоступной. я использовал this.element.attr("id") вместо этого получить идентификатор элемента, и, кажется, он работает нормально.
Есть много способов сделать это и примеров, но если вам нужно сделать еще один шаг и вам нужно предотвратить ввод ключа в формы, но все же он все еще нужен в многострочном текстовом поле, это становится более сложным. Следующее поможет решить проблему.
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
//There are 2 textarea forms that need the enter key to work.
if((event.target.id="CommentsForOnAir") || (event.target.id="CommentsForOnline"))
{
// Prevent the form from triggering, but allowing multi-line to still work.
}
else
{
event.preventDefault();
return false;
}
}
});
});
</script>
<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>
Возможно, его можно было бы еще упростить, но вы поняли концепцию.