Question

我是jquery的新手。我得到了Uncaught TypeError：$（...）。在尝试执行以下代码时，datepicker不是函数错误。我在堆栈溢出中提到了许多解决方案，但无法获得解决方案。请帮忙。

＆＃13;

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
        $( "#datepicker" ).datepicker();
    });

    $("#btn1").click(function(e) {
        e.preventDefault();
        if ($("#inputEmail").val() == "" || $("#inputEmail").val().length < 5) {
            $("#inputEmail").addClass("error");
            $("#inputEmail").val('');                        
        }
        else if ($("#inputPassword").val() == "" || $("#inputPassword").val().length < 5) {
            $("#inputPassword").addClass("error");
            $("#inputPassword").val('');
        }
        else {
            $("#inputEmail").removeClass("error");
            $("#inputPassword").removeClass("error");
        }

        if(jQuery("#check1").is(":checked")&&$("#inputEmail").val() == "" || $("#inputEmail").val().length < 5) {
            alert('Please enter correct passowrd and email');
        }
        else {
            alert('welcome'+$("#inputEmail").val()+'Your password is'+$("#inputPassword").val());
        }
    });
});
</script>

＆＃13;

 <style type="text/css">
.error
  {
    border-color:#F00;
}
.noterror
{
    border-color:#FFF;
}
    
    </style>

＆＃13;

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Navbar Template for Bootstrap</title>
  
     
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">   
  <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">    
  <link href="http://getbootstrap.com/examples/navbar-static-top/navbar-static-top.css" rel="stylesheet">
  <link href="http://getbootstrap.com/examples/navbar/navbar.css" rel="stylesheet">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/start/jquery-ui.css" rel="stylesheet">
     
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>   
  <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>       
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
   
      </head>


 <body>


    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Srivatsava Project</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="http://getbootstrap.com/examples/navbar/">Default</a></li>
            <li class="active"><a href="http://getbootstrap.com/examples/navbar-static-top/">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="http://getbootstrap.com/examples/navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">


    <div class="jumbotron1">
        <h1>Login page</h1>
        <div class="con">

      <form class="form-signin" id="#sign-in">
        <h2 class="form-signin-heading">Please sign in</h2>
        <br/>
        
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="" style="height:50px;width:200px;">
        <br/>
        
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" autofocus="" style="height:50px;width:200px;">
        <br/>
        <br/>
        <div class="checkbox">
          <label>
            <input type="checkbox" id="check1" value="remember-me" style="float:right"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="btn1" style="height:50px;width:200px;">Sign in</button>
      </form>
      <br/>
      <br/>
      <p>Date: <input type="text" id="datepicker"></p>
      <br/>
         <br/>
      <a class="btn btn-lg btn-primary" href="http://getbootstrap.com/components/#navbar" role="button">View navbar docs &raquo;</a>
    </div> <!-- /container -->
          
      </div>
      <!-- Main component for a primary marketing message or call to action -->
     

    </div> <!-- /container -->


      <!-- Main component for a primary marketing message or call to action -->
      

     <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

＆＃13;

Answer 1

我添加了以下代码以避免冲突并且运行正常

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});

Answer 2

解决此错误

错误“Uncaught TypeError：$（...）。datepicker不是函数”

而不是

$(document).ready(function () {
    $("#fecha").datepicker();
});

使用

$.noConflict();
jQuery(document).ready(function ($) {
    $("#fecha").datepicker();
});

Answer 3

我在CSHTML页面也做同样的事情并且收到错误。然后我做了以下事情

<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function ($) {
        $('#CollectedDate').datepicker();
    });
</script>

未捕获的TypeError：$（...）。datepicker不是函数

3 个答案: