Binding click events for all children

Question

I'm trying to bind click events for children of an element like so:

$('#A').children().bind('click',function () {
    console.log('Hello');
});

The HTML is

<select id='A'>
    <option val='1'>One</option>
    <option val='2'>Two</option>
</select>

I've checked out other questions in stackoverflow, such as Bind element and its children in jQuery and the same method is mentioned everywhere. Is there something wrong here?

Edit

I understand that there is a change event available, but, consider the scenario where there is a need to trigger the change event when I select the same option which is selected.

Change only works when options are changed from One to Two or vice versa, but what if I select the same option, i.e: Changing from Two to Two itself?

@AmitSoni `change` only fires if you click on a different option than the current selection. — Barmar, May 08 '14 at 07:53
Are you adding options dynamically? Your binding only applies to children that are there when you run that code. — Barmar, May 08 '14 at 07:54
If that's the case, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, May 08 '14 at 07:57

score 1 · Accepted Answer · answered May 08 '14 at 08:06

1

The other replies suggest solutions to the problem. The reason that your code may not work in a strict browser is that the click event is not defined for an option element. You can use the change event or if you really need to handle click, you should not use the native select element.

answered May 08 '14 at 08:06

Jiraiya

336
2
8

Thanks you for clarifying that. Just needed to know if there is another way to detect when a change is made(see question for recent Edit) – Mkl Rjv May 08 '14 at 09:32
This post http://stackoverflow.com/a/14446179/549895 has exactly what you are looking for. Though I would think twice before doing this, because as a user I wont expect something to change if I select the same thing again. But then again, you would have a better grip on your usecase than I :). – Jiraiya May 08 '14 at 12:40

score 0 · Answer 2 · answered May 08 '14 at 07:53

0

You probably need change() event instead of click and do not need to bind with option. The event will trigger whenever the option selection is changed by clicking the option.

Live Demo

$('#A').bind('change',function () {
    console.log('Hello');
});

answered May 08 '14 at 07:53

Adil

146,340
25
209
204

score 0 · Answer 3 · answered May 08 '14 at 07:53

0

You can use .change() event for select element here since .change() event will be fired when you change the option:

$('#A').on('change',function () {
    console.log('Hello');
}).change();

answered May 08 '14 at 07:53

Felix

37,892
8
43
55

score 0 · Answer 4 · answered May 08 '14 at 07:54

0

Is this the behaviour you wanted? http://jsfiddle.net/P97ML/

$('#A').bind('change',function () {
    console.log('Hello');
});

answered May 08 '14 at 07:54

Hannes Schneidermayer

4,729
2
28
32

Well, I have tried the change element, but, I have a scenario where I need to trigger an event when I select the option, which is already selected. So, I tried to manually add it using the click event. – Mkl Rjv May 08 '14 at 09:27

score 0 · Answer 5 · answered May 08 '14 at 07:55

0

Use on() with change event of select.

Do like this:

$('#A').on('change',function () {
    console.log($(this).val()); // log selected option value
});

answered May 08 '14 at 07:55

Ehsan Sajjad

61,834
16
105
160

This is essentially the same as the 3 previous answers. – Barmar May 08 '14 at 07:56

score 0 · Answer 6 · answered May 08 '14 at 07:56

You are doing it correctly (will work in most of the cases) but that is not the case with options inside select

you need to use change event , and if you want to get reference to the selected option you can use :selected

$('#A').bind('change',function () {
    console.log('Hello');
    var $selectedOption = $("option:selected",this);
});

score 0 · Answer 7 · answered May 08 '14 at 09:34

0

Mouse events aren't triggered on the individual options, they're triggered on the select menu as a whole. So do:

$('#A').click(function() {
    alert('Hello');
});

DEMO

answered May 08 '14 at 09:34

Barmar

741,623
53
500
612

Binding click events for all children

7 Answers7