Uncaught TypeError: $ (...). Datepicker не является функцией (анонимная функция)
Я нашел несколько ответов на переполнение стека, но по-прежнему не могу решить мою проблему. Я работаю на Django, но я не думаю, что это релевантно для этой ошибки.
Я пытаюсь сделать работу с java-скриптом для выбора даты, но получаю ошибку
1:27 Uncaught TypeError: $ (...). Datepicker не является функцией (анонимная функция) @1: 27fire @jquery-1.9.1.js: 1037self.fireWith @jquery-1.9.1.js: 1148jQuery.extend.ready @jquery-1.9.1.js: 433completed @jquery-1.9.1.js: 103 jquery-2.1.0.min.js: 4 XHR завершена загрузка: POST " https://localhost: 26143/skypectoc/v1/pnr/parse ".l.cors.a.crossDomain.send @jquery-2.1.0.min.js: 4o.extend.ajax @jquery-2.1.0.min.js: 4PNR.findNumbers @pnr.js: 43parseContent @contentscript.js: 385processMutatedElements @contentscript.js: 322
Это все мои сценарии:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#extra-content").hide();
$("#toggle-content").click(function(){
$("#extra-content").toggle();
});
});
</script>
любая обратная связь будет очень оценена
Ответы
Ответ 1
Что пошло не так?
Когда вы включаете jQuery в первый раз:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
Второй скрипт подключается к jQuery и добавляет $(...).datepicker
.
Но тогда вы включаете jQuery еще раз:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Он отменяет подключение и, следовательно, $(...).datepicker
становится неопределенным.
Несмотря на то, что перед этим появляется первый блок $(document).ready
тело функции анонимного обратного вызова не выполняется до тех пор, пока все сценарии не будут загружены, а затем $(...)
(точнее, window.$
) Относится к наиболее недавно загруженный jQuery.
Вы бы не столкнулись с этим, если вы сразу вызывали $('.dateinput').datepicker
а не в $('.dateinput').datepicker
$(document).ready
, но тогда вам нужно будет убедиться, что целевой элемент (с dateinput
класса) уже в документе перед сценарием, и обычно рекомендуется использовать ready
обратный вызов.
Решение
Если вы хотите использовать datepicker
из jquery-ui, вероятно, было бы разумнее включить скрипт jquery-ui после загрузки. jquery-ui 1.11.4 совместим с jquery 1. 6+, поэтому он будет работать нормально.
В качестве альтернативы (в частности, если вы не используете jquery-ui для чего-либо еще), вы можете попробовать bootstrap-datepicker.
Ответ 2
Вам просто нужно добавить три файла и две ссылки css. Вы можете также cdn. Ссылки для файлов js и css файлов таковы:
- jQuery.dataTables.min.js
- dataTables.bootstrap.min.js
- dataTables.bootstrap.min.css
- самозагрузки-datepicker.css
- самонастройки-datepicker.js
Они действительны, если вы используете загрузку в своем проекте.
Я надеюсь, что это поможет вам. С уважением, Вивек Сингла
Ответ 3
Ошибка связана с тем, что вы включаете ссылки сценария в двух местах, которые будут выполнять переопределение и повторную инициализацию выбора даты
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Ответ 4
Включение нескольких ссылок на библиотеку Jquery является причиной ошибки. Включите только одну ссылку на библиотеку Jquery, и это решит проблему.
Ответ 5
если вы используете ASP.NET MVC
На той части, которую вы видите, как показано ниже:
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")
Удалить строку "@Scripts.Render(" ~/bundles/jquery ")"
И прошёл как последняя строчка, как показано ниже:
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
Это помогает мне, и надежда помогает вам также.
Ответ 6
Эта ошибка возникает, потому что функция не определена. В моем случае я назвал функцию datepicker без включения файла datepicker js в то время, когда получил эту ошибку.