jquery e.target.hasClass no funciona

I dynamically create a new div (with a "textbox" class and ID), and some other elements inside of it, and later on in my code I bind that div to the click event, and display the element clicked, like so:

$('#textbox_'+i).bind('click', function(event){
    alert(event.target.className);
}

This is fine, and it'll give me textbox as one of the classes displayed. But event.target.hasClass() doesn't seem to work. So, when I do the following, nothing happens:

$('#textbox_'+i).bind('click', function(event){
    if(event.target.hasClass('textbox')) { alert('got it!'); }
}

I tried it a few different ways and it appears to me that event.target.hasClass() just doesn't work. Is there another way to deal with events or am I doing something wrong?

preguntado el 28 de agosto de 12 a las 09:08

2 Respuestas

You're trying to use a jQuery method, hasClass(), on a standard DOM element. You need to convert the plain JS DOM element e.target to a jQuery object, like so:

$(event.target).hasClass('textbox')

And you end up with :

$('#textbox_'+i).on('click', function(event){
     if( $(event.target).hasClass('textbox')) alert('got it!');
});

Observe el uso de on(), the proper closing of the click function, and you don't need curly brackets in your if statement if you're only executing a simple alert.

Respondido 28 ago 12, 09:08

Wow! okay that was simple! Maybe this is a little off topic, but what's the difference between $(event.target) and event.target? The former works with hasClass, but not when I try to alert .className. - user961627

hasClass is a jQuery function, .className is plain javascript - andersonola

The first one is wrapped in jQuery, so it's a jQuery object and can be used with jQuery methods. The second is a plain javascript object returned in the functions event and can be used with plain javascript methods but not jQuery methods. - adeneo

I needed to stop propogation on a .live listener; so I used the above tip and got if(!$(e.target).hasClass("seeDetails")) return false; y funcionó muy bien. ¡Gracias! - Thomas

Great solution. However, I'm getting this error when the document loads: ReferenceError: event is not defined. ¿Algunas ideas? - Ralph David Abernathy

If you want to keep your JS DOM element plain without using jQuery...

event.target.classList.contains('textbox')

Respondido el 21 de diciembre de 20 a las 11:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.