Bootstrap selectpicker, on select event

Question

I have a bootstrap selectpicker which is working good (event is fired when selected). I have a code, which is creating 2nd selectpicker when 1st (which is working) is changed. The problem is, that this 2nd selectpicker is not firing an event when it is selected (like if i do "alert" on "change" with jQuery). Tried a few fixes, readed about the native events, but they did not worked...

var selector = $(this).closest('.product-item-options');
flavourTemplate = '<div class="row"><div class="col-xs-4 col-sm-4"><div class="tree-design"><span></span><span class="middle-sep"></span><span></span></div></div><div class="col-xs-8 col-sm-8"><select id="product-' + product + '-flavour-' + j + '" name="flavour[' + j + ']" class="selectpicker spec-selectpicker product-flavours other-flavours">';
                // flavourSelect are the options
                flavourTemplate += flavourSelect;
                flavourTemplate += '</select></div></div>';
                selector.append(flavourTemplate);
                $('.selectpicker').selectpicker('render');
                $('.selectpicker').selectpicker('refresh');

And here is the simple JS code:

$(document).ready(function(){
    $('.selectpicker').on('changed.bs.select', function (e) {
       alert('changed');
    });
});

Answer 1

I solved this problem for myself this way:

$('#mySelect').parent().find("input").bind('keyup', (event) => {
  // your code
})

(Of course, you can use any another selector to find your select first)