Help with jquery Uncaught TypeError: $ is not a function

Question

Help with jquery Uncaught TypeError: $ is not a function

Navigation

#1 by (4 votes)

0

I'm having 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 not tell which version of Jquery is being used on the site, I'm dropping parachute in the world of js rs.

In localhost with jquery 2 it worked perfectly, after I went up to the server, started to give this error and stopped working the filter.

Jquery used on the site: link

Custom js custom code link

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();
  }                                                                           
}

javascript html jquery

asked by anonymous 05.05.2017 / 19:20

1 answer

How to remove negative elements from a row? Problem when rotating android mobile screen

score 4 · Accepted Answer

It's probably the order that added jQuery, the order in the 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 the bootstrap uses jQuery but in the order of loading jQuery has not yet been requested.

So remember, jQuery should come first

Note that if you are using the async attribute it can also cause flaws, for example:

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

Because custom.js will not wait for the jquery.js to load, another important thing to note is if it is 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 might be happening is that some library like Angular.js (or another one) may be overwriting the variable $ :

One way to resolve is to change $ to jQuery

Another way is to isolate the scope, for example:

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

note: I do not really see the need to use angular.js with jQuery, even though both are distinct, Angular is very specific, if you use it for a simple thing like a button only then better nor use Angular.