0

Пытаюсь использовать этот плагин 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"
  });
2
  • Зачем вы две версии jquery используете? Если вы пишете код в файлы js/script.js то он загружается раньше, чем jquery и ваш плагин
    – ArchDemon
    18 окт 2019 в 18:52
  • @ArchDemon Я поставил подключение своего js файла в самый конец и убрал повторяющееся добавление jquery, но проблема осталась... Может есть еще возможные причины?
    – Zoom
    18 окт 2019 в 19:39

1 ответ 1

0

Даже если вы поместили скрипт в конец файла, он все равно выполняется раньше, чем построился 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.