Bind event only on the parent element

Question

I have this html data:

<select class="select">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

How do I bind an event only when I click the select element shown in the page, not when the option elements are clicked. I don't want to bind event on the items that are in the dropdown.

Update: I did found this one post. But it does not work for my case.

try : $('select').focus(function(){...}); or $('select').click(function(){...}); — Himanshu Upadhyay, Jul 19 '17 at 11:41
Thank you. I think the first option does the job but I'm not sure if it's good for long run.. — Rabin Lama Dong, Jul 19 '17 at 11:49

lalithkumar · Answer 1 · 2017-07-19T11:52:31.753

1

Try this:

$(function(){
$('select').on('focus',function(){
console.log($(this).val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

edited Jul 19 '17 at 11:52

answered Jul 19 '17 at 11:43

lalithkumar

3,480
4
24
40

you are looking like this ? @Rabin Lama – lalithkumar Jul 19 '17 at 11:48
Better use `change` event – Satpal Jul 19 '17 at 11:48
ya i given change option first..But he is telling on click of the select only want to trigger event – lalithkumar Jul 19 '17 at 11:49
No. I didn't wanna bind the event while clicking on the list items (i.e. list item `a`) – Rabin Lama Dong Jul 19 '17 at 11:52
when you focus on the select also the list out will get trigger and option get changed.May i know reason of asking like that? – lalithkumar Jul 19 '17 at 11:57

score 0 · Accepted Answer · answered Jul 19 '17 at 11:51

0

This does the job for now.

$('.select').on('focus', function() {
    //code here
});

But I'm not sure if it is good for long run.

answered Jul 19 '17 at 11:51

Rabin Lama Dong

2,422
1
27
33

score 0 · Answer 3 · edited Jul 19 '17 at 18:43

0

try :

$('select').focus(function(){...});

or

$('select').click(function(){...});

edited Jul 19 '17 at 18:43

Priyank

3,778
3
29
48

answered Jul 19 '17 at 11:51

Himanshu Upadhyay

6,558
1
20
33

Bind event only on the parent element

3 Answers3