JQuery: Obtener el ID de elemento primario de un elemento se ha hecho clic

Question

Tengo un div así:

<div id="popupDiv1" class="popupDivClass"> 
    <a id="popupDivClose" class="popupCloseClass">x</a> 
</div> 

Cuando hago clic en la 'x' (Quiero ejecutar una función jQuery llamado disablePopup(id); donde id es la Identificación del popupDiv coresponding (tengo muchos popupDiv cada uno con su propio botón X.

con el fin de hacerlo me implementado la siguiente

$(".popupCloseClass").click(function (event) { 
    var buttonID = $(event.target).attr("id"); 
    var id = $(buttonID).closest("div").attr("id"); 
disablePopup(id); 
}); 

, básicamente, me sale el id de la popupCloseCl Culo clickeado luego obtengo el ID de su padre (el popupDiv correspondiente) a través del método más cercano. entonces llamo disablePopup.

Pero esto no está funcionando.

Incluso intenté utilizar el método var buttonID = $(buttonID).parent().attr("id"); pero tampoco funcionó.

También probé var id = this.id;

Cualquier ayuda es muy apreciada

Gracias

Answer 1

en lugar de utilizar closest puede utilizar parent así ...

var id = $(this).parent().attr("id"); 

aviso Puede utilizar la palabra clave this para hacer referencia al elemento que dio inicio al evento. Como lo tiene, está usando el valor de buttonID como selector de elementos que tendría un valor de "popupDivClose" y sin agregar un # al principio no buscará una ID, sino un elemento de etiqueta llamado "popupDivClose".

Si quieres seguir usando buttonID que podría haber utilizado esta línea de código para que funcione ...

var id = $("#" + buttonID).parent().attr("id"); 

Sin embargo, habría preferido escribir todo el evento como tal ...

$(".popupCloseClass").click(function (event) { 
    event.preventDefault(); 

    var id = $(this).parent().attr("id"); 

    disablePopup(id); 
}); 

aviso el uso de event.preventDefault(); esto asegurará que el navegador no procesará la acción natural para un enlace de clic (es decir,navegación de páginas) - sin embargo, en Chrome, al menos, se necesita especificar un valor href para la navegación de todos modos

Here is a working example

Answer 2

Debe hacer

$(".popupCloseClass").click(function (event) { 
    var id = $(this).closest("div").attr("id"); 
}); 

(también se podría utilizar $(this).parent().attr("id");) pero utilizando más cercano es el más seguro en caso usted cambia su estructura html

Answer 3

Esto funciona bien:

$('a.popupCloseClass').click(function() { 
    var id = $(this).parent().attr('id'); 
});​ 

JSFiddle Demo

Usted debería simplemente usar this en lugar de la forma en que está obteniendo el ID y luego tratar de usarlo como un selector (le faltaba el bef # ore el ID):

Answer 4

Esto debe trabajar:

$(".popupCloseClass").click(function (event) 
{ 
    var buttonID = $(this).parent().attr('id'); 
    disablePopup(buttonID); 
});