Help with jquery Uncaught Typeerror: $ is not a Function

Question

I have a problem with a filter selector, when I choose a city to filter information about it, the browser console shows me the error below. I can’t tell which version of Jquery is being used on the site, I am parachuting into the world of js rs.

In localhost with jquery 2 worked perfectly, after I climbed to the server, started giving this error and stopped working the filter.

Jquery used on the site: https://jsfiddle.net/gLep8kdn/

Full code of custom js https://jsfiddle.net/0kLjj0y5/

Uncaught Typeerror: $ is not a Function at Htmlselectelement.filterlist (custom.js:3)

Code

$('select[name="list_citys"]').change(filterList);   3 ª linha

function filterList(e) {
var value = e.target.value;
$(".list_citys_shop .new-citys").parent().parent().removeClass("hidden");
if (value == "all_city") $(".list_citys_shop .new-citys").slideDown();
else {
    $(".list_citys_shop .new-citys").slideUp();

    $(".list_citys_shop ul:not([data-category*=" + value + "])").parent().addClass("hidden");
    $(".list_citys_shop ul[data-category*=" + value + "]").find(".new-citys").stop().slideDown();
  }                                                                           
}

Answer 1

It’s probably the order that added jQuery, the order in HTML should always be this:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/plugin-jquery1.js"></script>
<script src="caminho do jquery/plugin-jquery2.js"></script>
<script src="caminho do jquery/plugin-jquery3.js"></script>
<script src="/assets/custom.js"></script>

If you are using bootstrap, then the order will be this:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/bootstrap.js"></script>
<script src="caminho do jquery/plugin-jquery1.js"></script>
<script src="caminho do jquery/plugin-jquery2.js"></script>
<script src="caminho do jquery/plugin-jquery3.js"></script>
<script src="/assets/custom.js"></script>

If you do something like this:

<script src="caminho do jquery/bootstrap.js"></script>
<script src="caminho do jquery/jquery.js"></script>
<script src="/assets/custom.js"></script>

Or so:

<script src="/assets/custom.js"></script>
<script src="caminho do jquery/jquery.js"></script>

It will fail because bootstrap uses jQuery but in the order of loading jQuery has not yet been requested.

So remember, jQuery must come first of all

Note that if you are using the attribute async may also cause failures, such as:

<script async src="caminho do jquery/jquery.js"></script>
<script src="/assets/custom.js"></script>

Because custom.js won’t wait for jquery.js to load, another important thing to note is if you’re not loading two jQuery at the same time, for example:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/jquery.min.js"></script>

Protecting the scope

Another thing that may be occurring is that some library like Angular.js (or another) may be overwriting the variable $:

• One way to solve it is to change the $ for jQuery

• Another way is to isolate the scope, so for example:

  (function ($) {
      $(...).funcao(...);
  })(jQuery);
  

note: I really don’t see the need to mix angular.js with jQuery, even if both are distinct, Angular is very specific, if you’re going to use for a simple thing like a button just then better not use Angular.

Answer 2

If you are working with Wordpress, as in my case, use this solution:

;(function($){
    // seu código
})(jQuery);

Caught in SOF