Uncaught TypeError: $ (...). Datepicker không phải là một chức năng (chức năng ẩn danh)

Question

Tôi tìm thấy vài câu trả lời trên ngăn xếp tràn nhưng vẫn không thể giải quyết vấn đề của tôi. Tôi đang chạy trên Django nhưng tôi không nghĩ rằng nó có liên quan cho lỗi này.

Tôi cố gắng để làm cho công việc java script bảng chọn ngày của tôi, nhưng tôi nhận được lỗi

1:27 lỗi chưa gặp:. $ (...) datepicker không phải là một chức năng (chức năng ẩn danh) @ 1: 27fire @ jquery-1.9.1.js: 1037self.fireWith @ jquery-1.9.1.js: 1148jQuery.extend.ready @ jquery-1.9.1.js: 433đã hoàn thành @ jquery-1.9.1.js: 103 jquery-2.1 .0.min.js: 4 XHR tải xong: 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

Đây là tất cả các tập lệnh của tôi:

<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>    

bất kỳ thông tin phản hồi sẽ rất cảm kích

Answer 1

gì đã xảy ra?

Khi bạn bao gồm jQuery lần đầu tiên:

<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> 

Kịch bản thứ hai cắm mình thành jQuery, và "thêm" $(...).datepicker.

Nhưng sau đó bạn đã bao gồm jQuery một lần nữa:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

Nó Undoes các cắm vào và do đó $(...).datepicker trở nên không xác định.

Mặc dù khối $(document).ready đầu tiên xuất hiện trước đó, nội dung chức năng gọi lại ẩn danh không được thực thi cho đến khi tất cả tập lệnh được tải và sau đó $(...) (window.$ chính xác) đang đề cập đến jQuery được tải gần đây nhất.

Bạn sẽ không chạy vào này nếu bạn gọi $('.dateinput').datepicker ngay lập tức chứ không phải trong $(document).ready gọi lại, nhưng sau đó bạn sẽ cần phải chắc chắn rằng phần tử mục tiêu (với lớp dateinput) là đã có trong tài liệu trước khi kịch bản, và nó thường khuyên bạn nên sử dụng gọi lại ready.

Giải pháp

Nếu bạn muốn sử dụng datepicker từ jquery-ui, nó có lẽ sẽ làm cho ý nghĩa nhất để bao gồm các jquery-ui kịch bản sau bootstrap. jquery-ui 1.11.4 tương thích với jquery 1.6+ vì vậy nó sẽ hoạt động tốt.

Cách khác (đặc biệt nếu bạn không sử dụng jquery-ui cho bất kỳ thứ gì khác), bạn có thể thử bootstrap-datepicker.

Answer 2

Lỗi này xảy ra, vì hàm không được xác định. Trong trường hợp của tôi, tôi đã gọi hàm datepicker mà không bao gồm tệp jp datepicker vào thời điểm tôi nhận được lỗi này.

Answer 3

Bạn chỉ cần thêm ba tệp và hai liên kết css. Bạn cũng có thể là cdn. Liên kết cho các file js và các file css là như vậy: -

1. jQuery.dataTables.min.js
2. dataTables.bootstrap.min.js
3. dataTables.bootstrap.min.css
4. bootstrap-datepicker.css
5. bootstrap-datepicker.js

Họ là hợp lệ nếu bạn đang sử dụng bootstrap trong dự án của bạn.

Tôi hy vọng điều này sẽ giúp bạn. Kính trọng, Vivek Singla

Answer 4

Lỗi này là bởi vì bạn đã bao gồm các liên kết kịch bản ở hai nơi mà sẽ làm ghi đè và tái khởi của chọn ngày

<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>

Vì vậy, loại trừ src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

hoặc src = "http://code.jquery.com/ui/1.11.0/jquery-ui.js"

Nó sẽ làm việc ..