[danik.js]

<div class = "section" >
   <dt id = 'category-label' class ='category-label' >
     <label for='category-label' class = 'optional'>
   </dt>
   <dd id = 'category-element' class ='category-element'>
      <div class="custom-select done">
        <span class="custom-text" style="width: 173px;">11111</span>
         <div class="select-list custom-scroll" style="display: none;">
             <ul>
                 <li class="selected" data-value="1">11111</li>
                 <li class="" data-value="2">22222</li>
             </ul>
         </div>
<select name="category" id="category">
    <option value="1" label="1">11111</option>
    <option value="2" label="2">22222</option>
</select></div>
   </dd>
 
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).on('change', '#category', function(){
            alert('It WORKS')});
</script>

Работает же)

А уж не самодельный ли выпадающий список у вас используется? Часто настоящий скрывают в силу убогости внешнего вида и невозможности использовать css, и подменяют рукодельным, но стилизуемым. Если так, то он не доработан. Обычно при изменении значения это изменение тут же передают в нативный селект. И/или триггерят на нем событие change.