Select не запускает скрипты js

$('#SelectCtgys').on('click', function(){
  alert('Тест');
});

$("select").each(function() {
  var $this = $(this),
    numberOfOptions = $(this).children("option").length;

  $this.addClass("select-hidden");
  $this.wrap('<div class="select"></div>');
  $this.after('<div class="select-styled"></div>');

  var $styledSelect = $this.next("div.select-styled");
  $styledSelect.text($this.children("option").eq(0).text());

  var $list = $("<ul />", {
    class: "select-options",
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    $("<li />", {
      text: $this.children("option").eq(i).text(),
      rel: $this.children("option").eq(i).val(),
    }).appendTo($list);
  }

  var $listItems = $list.children("li");

  $styledSelect.on('click', function(e) {
    e.stopPropagation();
    $('#SelectCtgys').click();
    $("div.select-styled.active")
      .not(this)
      .each(function() {
        $(this).removeClass("active").next("ul.select-options").hide();
      });
    $(this).toggleClass("active").next("ul.select-options").toggle();
  });

  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass("active");
    $this.val($(this).attr("rel"));
    $list.hide();
    
  });

  $(document).click(function() {
    $styledSelect.removeClass("active");
    $list.hide();
  });
});

$select-width: 187px;
$select-height: 40px;

.select-hidden {
   display: none;
   visibility: hidden;
   padding-right: 10px;
 }
 
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 17px;
  line-height: 1;
  width: $select-width;
  height: $select-height;
  @include text-align(left);

  @media #{$mobile_device} {
    width: 100%;
    height: auto;
    @include text-align(left);
  }
}
.select-styled {
  padding: 5.5px 48px 5.5px 27px;
  border: 2px solid #56C167;
  @include border-radius(5px);
  color: #56C167;
  @include transition(all 0.2s ease-in);
  &:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: var(--text-green) transparent transparent transparent;
    position: absolute;
    top: 17px;
    right: 30px;
    @include border-radius(3px);
  }

  &:active,
  &.active {
    &:after {
      top: 10px;
      border-color: transparent transparent #56C167 transparent;
    }
  }
}

.select-options {
  display: none;
  position: absolute;
  top: 89%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #56C167;
  border-left: 2px solid #56C167;
  border-bottom: 2px solid #56C167;
  @include border-radius(5px);
  li {
    margin: 0;
    padding: 6px 8px 6px 27px;
    color: #56C167;
    background-color: #F6F6F6;
    @include transition(all 0.15s ease-in);

    &:hover {
      color: #2DAF42;
    }

    &[rel="hide"] {
      display: none;
    }

    &:last-child {
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }

  @media #{$mobile_device} {
    top: 92%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">
  <select class="SelectCtgys" id="SelectCtgys">
    <option value="0">Все подряд</option>
  </select>
</div>