Почему не работает JQuery плагин? Uncaught TypeError: $(...).circleProgress is not a function

238
22 сентября 2021, 06:40

Пытаюсь использовать этот плагин https://github.com/kottenator/jquery-circle-progress на своем сайте, но всегда получаю ошибку Uncaught TypeError: $(...).circleProgress is not a function , если пытаюсь активировать его из js(в html работает) . В чем может быть проблема? Вот все что я подключил

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

Скрипт

 $('.progress_circle').circleProgress({
    value: 0.75,
    size: 162,
    startAngle: 4.75,
    fill : "#C9E45B"
  });
Answer 1

Даже если вы поместили скрипт в конец файла, он все равно выполняется раньше, чем построился DOM страницы. Поэтому скрипт не находит нужный класс. Используйте запуск скрипта по событию DOMContentLoaded и все заработает

document.addEventListener("DOMContentLoaded", function () { 
  $('.progress_circle').circleProgress({ 
    value: 0.75, 
    size: 162, 
    startAngle: 4.75, 
    fill : "#C9E45B" 
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.1.3/dist/circle-progress.js"></script> 
<div class="progress_circle"></div>

READ ALSO
Почему цикл прерывается?

Почему цикл прерывается?

Number==answer при вводе числа

113
vue drag resize plugin по touch разрешить переход по ссылке

vue drag resize plugin по touch разрешить переход по ссылке

Есть небольшой проект с vue-drag-resize плагином:

100
Как изменить параметры svg с помощью Jquery?

Как изменить параметры svg с помощью Jquery?

Можно ли сделать так, что бы при определенных условиях подключенный svg файл поворачивался на 90 градусов с помощью Jquery? Svg подключен через objectЯ...

242