Event trigger on <option> doesn't work on webkit

Question

I want to add an event trigger on a drop-down <select> list. Example ( jsFiddle ):

 $( document ).ready(function() { $('.lorem').click(function() { alert('ipsum'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option class="lorem">1</option> <option class="lorem">2</option> </select> 

With Firefox, when I click on it, it triggers fine. But on webkit (Chrome/Safari etc), it does not work. Why?

Answer 1

If you are using this to detect input changes, you can use .change() :

 $( document ).ready(function() { $("select").change(function(e) { console.log($("select").val()); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option class="lorem">1</option> <option class="lorem">2</option> </select> 

Answer 2

You could instead use a change event on your select element and then check where the selected option has the lorem class like so:

 $(document).ready(function() { $('select').on('change', function() { if ($("option:selected", this).hasClass('lorem')) { alert('ipsum'); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option class="lorem">1</option> <option class="lorem">2</option> <option class="foo">3</option> </select>