Obtener el ID del elemento que disparó un evento
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Hay alguna forma de obtener el ID del elemento que desencadena un evento?
Estoy pensando en algo como:
<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>
Excepto, por supuesto, que la var test debe contener la identificación "aaa", si el evento se dispara desde la primera forma, y "bbb", si el evento se dispara desde el segundo formulario.
Solución
En jQuery event.target siempre se refiere al elemento que desencadenó el evento, donde event es el parámetro pasado a la función. http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
Tenga en cuenta también que this también funcionará, pero no es un objeto jQuery, por lo que si desea utilizar una función jQuery en él, debe referirse a él como $(this), p.ej.:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
Otros consejos
Como referencia, ¡prueba esto!¡Funciona!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Aunque se menciona en otras publicaciones, quería explicar esto:
$(event.target).id es indefinido
$(event.target)[0].id da el atributo de identificación.
event.target.id también proporciona el atributo de identificación.
this.id da el atributo de identificación.
y
$(this).id es indefinido.
La diferencia, por supuesto, está entre los objetos jQuery y los objetos DOM."id" es una propiedad DOM, por lo que debe estar en el objeto del elemento DOM para usarlo.
(Me hizo tropezar, así que probablemente hizo tropezar a alguien más)
Para todos los eventos, no limitado solo a jQuery, puedes usar
var target = event.target || event.srcElement;
var id = target.id
Dónde event.target falla, vuelve a caer event.srcElement para es decir.Para aclarar el código anterior no requiere jQuery pero también funciona con jQuery.
Puedes usar (this) para hacer referencia al objeto que activó la función.
'this' es un DOMINGO elemento cuando estás dentro de una función de devolución de llamada (en el contexto de jQuery), por ejemplo, siendo llamado por el clic, cada, enlace, etc.métodos.
Aquí es donde puedes aprender más: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Genero una tabla dinámicamente a partir de una base de datos, recibo los datos en JSON y los coloco en una tabla.Cada fila de la tabla tiene un único ID, que es necesario para acciones posteriores, por lo que, si se modifica el DOM, necesita un enfoque diferente:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Elemento en el cual evento disparado tenemos evento propiedad
event.currentTarget
Obtenemos nodo DOM objeto en el que se configuró el controlador de eventos.
El nodo más anidado que inició el proceso de burbujeo lo tenemos en
event.target
El objeto de evento es siempre el primer atributo del controlador de eventos, ejemplo:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
Más sobre delegación de eventos Puedes leer en http://maciejsikora.com/standard-events-vs-event-delegation/
El elemento fuente como objeto jQuery debe obtenerse mediante
var $el = $(event.target);
Esto le proporciona la fuente del clic, en lugar del elemento al que también se asignó la función de clic.Puede ser útil cuando el evento de clic está en un objeto principal, por ejemplo, un evento de clic en una fila de tabla, y necesita la celda que se hizo clic en
$("tr").click(function(event){
var $td = $(event.target);
});
Puedes intentar usar:
$('*').live('click', function() {
console.log(this.id);
return false;
});
En el caso de los controladores de eventos delegados, es posible que tenga algo como esto:
<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>
y tu código JS así:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
});
Lo más probable es que encuentres que el itemId es undefined, ya que el contenido del LI está envuelto en un <span>, lo que significa el <span> Probablemente será el objetivo del evento.Puedes solucionar esto con un pequeño cheque, así:
$(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
});
});
O, si prefiere maximizar la legibilidad (y también evitar la repetición innecesaria de llamadas de ajuste de 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
});
});
Al utilizar la delegación de eventos, el .is() El método es invaluable para verificar que el objetivo de su evento (entre otras cosas) es realmente lo que necesita.Usar .closest(selector) para buscar en el árbol DOM y usar .find(selector) (generalmente junto con .first(), como en .find(selector).first()) para buscarlo.No necesitas usar .first() cuando usas .closest(), ya que solo devuelve el primer elemento ancestro coincidente, mientras que .find() devuelve todos los descendientes coincidentes.
Usar puede Usar evento .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);
}
Trabajando JSFiddle aquí.
Esto funciona en un nivel superior z-index que el parámetro de evento mencionado en las respuestas anteriores:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
De esta manera siempre obtendrás el id del (en este ejemplo li) elemento.También cuando se hace clic en un elemento hijo del padre.
this.element.attr("id") funciona bien en IE8.
Ambos funcionan,
jQuery(this).attr("id");
y
alert(this.id);
Sólo usa el this referencia
$(this).attr("id")
o
$(this).prop("id")
Puede usar la función para obtener la identificación y el valor del elemento modificado (en mi ejemplo, he usado una etiqueta Seleccionar.
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
esto funciona con la mayoría de los tipos de elementos:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
estoy trabajando con
Autocompletar jQuery
Intenté buscar un event como se describió anteriormente, pero cuando se activa la función de solicitud, no parece estar disponible.solía this.element.attr("id") para obtener el ID del elemento, y parece funcionar bien.
En el caso de Angular 7.x puedes obtener el elemento nativo y su identificación o propiedades.
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>
