jquery click label+checkbox detect which?

Question

I am trying to check the event.target.nodeName as follows:

$("input").click(function(e){
    if(e.target.nodeName == "LABEL") {
       alert('label click');
        e.preventDefault();
    } else {
       alert($(this).attr('checked') ? 'checked': 'unchecked');
    }
});

But the name never equals label? What am I doing wrong?

Quick jsfiddle

In this scenario nodeName will always be equal to the element you selected for the event. There's no way to attach to the label unless you select the label initially. — Ohgodwhy
– Ohgodwhy, Commented Sep 24, 2012 at 21:46
Always bind the container element if you thinking of using e.target, basically the handler is executed as the event bubbled all the way down to the child element. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Sep 24, 2012 at 21:47

the Tin Man · Accepted Answer · 2012-09-24 21:50:50Z

5

You should select the label(parent) element. Currently the only target of your click handler is the input element:

$("label").click(function(e){
  // ...
})

http://jsfiddle.net/j7nSq/

edited Sep 24, 2012 at 21:50

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Sep 24, 2012 at 21:43

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

the Tin Man · Accepted Answer · 2012-09-24 21:49:47Z

2

I think the reason this doesn't work is because this will only run if you click on input:

  if(e.target.nodeName == "LABEL") {

edited Sep 24, 2012 at 21:49

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Sep 24, 2012 at 21:47

user1695032

1,1426 silver badges10 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-09-24 21:51:20Z

1

You are not selecting the label at all. Select the label first and try again:

You are hitting the wrong element here..

$('label').on('click', function(e) {
    // Your logic here

});

Instead of click on input.

Make sure you delegate the event using .on().

edited Sep 24, 2012 at 21:51

answered Sep 24, 2012 at 21:45

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

3 Comments

bfavaretto Over a year ago

Nitpick: your example uses on(), but it's not delegating.

bfavaretto Over a year ago

I'm not even sure I'm correct anymore (since your code does handle clicks bubbled from the input), but usually when I see the term "delegation" it refers to cases when you target descendant nodes, but the handler is attached to the parent (like in $('label').on('click', 'input', function ..., which wouldn't solve the OP problem here). So forget what I said, I'm not sure if that's technically delegation or not.

Sushanth -- Over a year ago

@bfavaretto.. Think I used the wrong workd here.. Looks like you are right :)

Collectives™ on Stack Overflow

jquery click label+checkbox detect which?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related