Обновление функции JQuery при изменении Выберите пункт

Question

<select class="brandselect selectpicker"> 
     <option>A</option> 
     <option>B</option> 
     <option>C</option> 
</select> 

<select class="modelselect selectpicker"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
</select> 

У меня есть два раскрывающихся списка, которые используют плагин Jquery Selectric для стилизации выбранных элементов.

Второе выпадающее меню динамически генерируется при выборе первого выпадающего списка. Следующие функции плагина работают при первом выборе выпадающего списка. Он обновляется.

Мне нужна эта функция, чтобы обновить плагин для всех выпадающих списков, после выбора вторых выпадающих элементов. Но он не обновляется, и он возвращается к стилю по умолчанию выпадающих списков.

Как я могу оживить эти функции, когда он запускается один раз?

$('.brandselect').change(function() { 
      setTimeout(function() { 
     $('selectpicker').selectric('refresh'); 
     }, 500); 
    }); 

    $('.modelselect').change(function() { 
      setTimeout(function() { 
     $('.selectpicker').selectric('refresh'); 
     }, 500); 
    }; 

Answer 1

Вы можете использовать .он (делегирование событий)

Поместите событие на родителе из полого выбора:

<div id="parent"> 
<select class="brandselect selectpicker"> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 

<select class="modelselect selectpicker"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
</div> 

и ваши JS:

обновленного Спасибо - Eduardo Quintana

$('#parent').on('change', '.brandselect', function() { 
     setTimeout(function() { 
    $('selectpicker').selectric('refresh'); 
    }, 500); 
}); 

$('#parent').on('change', '.modelselect', function(){ 
     setTimeout(function() { 
    $('.selectpicker').selectric('refresh'); 
    }, 500); 
};