1

What I do here is that I dynamically create a drop-down and bind the click event to the <option> within the <select>

var $select = $('<select></select>'),
    $option1 = $('<option>a</option>'),
    $option2 = $('<option>b</option>');

    $option1.val(1);
    $option2.val(2);

$(document.body).on('click','select option',function(){
      console.log("click-option works");
    });

    $select.append($option1);
    $select.append($option2);

    $(document.body).append($select);

As I read here, Since I am dynamically adding content, I delegated the event handling to the top most element in the DOM.

Now my problem is this is not working in chrome as expected. In fire-fox it seems to work fine.

I have also read through this link and the other one but to no avail.

Interestingly when I do this in the place of 'select option' selector

$(document.body).on('click','select',function(){
      console.log("click-option works");
    });

The output is logged, However that is definitely not what I had in mind. The output is logged whenever I select the drop-down itself, not to mention the options in the drop-down. As a temporary work around I am using change event in the following way :

$(document.body).on('change','select',function(event){
      console.log("change works");
      console.log(event);
    });

This seems to do the trick,However I want to know why It is not working in the original case and any work-arounds if possible.

Here is a fiddle for what I have done so far.

UPDATE : I have also checked out this link. However that is for just pure javascript, I wanted to know why it snot working in my case. More specifically, in the delegated event handler where we specifiy the selector, Why does it fail at 'select option' and work at 'select' in chrome ?

Community
  • 1
  • 1
Kiran Yallabandi
  • 2,544
  • 2
  • 22
  • 25

1 Answers1

1

The issue is because you're attaching a click event to the option elements which isn't very reliable. The click event should go on the select itself - but note that even that isn't following best practices as you should use the change event so that your code is fired even when the option is selected via the keyboard. To get the value of the selected ooption within the handler use $(this).val(), like this:

var $select = $('<select></select>'),
  $option1 = $('<option>a</option>'),
  $option2 = $('<option>b</option>');

$option1.val(1);
$option2.val(2);

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

$select.append($option1);
$select.append($option2);

$('body').append($select);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also note that this can be shortened to just:

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

$('<select><option value="1">a</option><option value="2">b</option></select>').appendTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Hi, Thanks for the input I am already doing that for now as I mentioned in the question. Now is there any way I can extract from change as to which option was originally selected. That was my motivation to use click actually ? – Kiran Yallabandi Sep 13 '16 at 14:59
  • Yes, you can just use `$(this).val()` to get the value of the selected option in the `change` event handler – Rory McCrossan Sep 13 '16 at 15:00
  • No problem, glad to help – Rory McCrossan Sep 13 '16 at 15:03
  • Also as mentioned in the comments by @ben sewards, It's specifically a web-kit issue, would it be possible to expand on that in the answer ? – Kiran Yallabandi Sep 13 '16 at 15:05
  • 1
    It's not just a Webkit issue, it also affects older versions of Mozilla and IE. This is why I stated that it's unreliable to use that event on the `option` element – Rory McCrossan Sep 13 '16 at 15:09