jQuery click event not firing on optgroup

Answer 1

Here's how you can solve it using jQuery.

First assign the event to the optgroup, and see if propagation was stopped.

$('optgroup').on('click',function(e) {
    if(!e.isPropagationStopped()){
        if ($(this).find('option:visible').length == $(this).children().length) {
            $(this).children().hide();
        }
        else {
            $(this).children().show();
        }
    }
});

Next up, we want to prevent the previous piece of code to trigger when we click one of the child options.

$('optgroup > option').on('click',function(e) {
    e.stopPropagation();
    $(this).parent().trigger('change');
});

The "trigger" event that is called at the end of the function is to ensure that any other assigned triggers on the change event are still triggered.