Uncaught TypeError: $(...).chosen(...).on is not a function

I have used a JQuery chosen function on a <select> element on UI which populates the <option> values from the database via ajax call.

<select id="assetClass" data-placeholder="Choose an Asset Class..."
    class="chosen-select" multiple style="width: 200px;" tabindex="1">
<option value=""></option>

I am writing a jquery code in a js file which will console.log or alert whichever element is selected or deselected from the <select>

$(".chosen-select").chosen().on("change", function(event, params) {

  if (params.selected) {
    //  $("#status").text('The option: ' + params.selected + ' was selected.');
     console.log(params.selected);

  }
  if (params.deselected) {
  //   $("#status").text('The option: ' + params.deselected + ' was deselected.');
      console.log(params.deselected);
  }});

But the problem is when i load the page, I get below error

Uncaught TypeError: $(...).chosen(...).on is not a function

Other stackoverflow answers suggests adding (jQuery); at the end as below.

;(function($){
    // your code
})(jQuery);

But still the problem exists.