Question

为什么我得到了

“jQuery.colorbox不是函数”

点击“提交”按钮后，调用makeCall()函数。然后我得到“非功能”错误。我可以打开指向jquery.colorbox-min.js的URL，然后打开js文件就可以了。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
      <script type="text/javascript">
        WebFont.load({
          google: {
            families: ["Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic","Varela Round:400","PT Sans:400,400italic,700,700italic"]
          }
        });
      </script>
      <script src="js/modernizr.js" type="text/javascript"></script>
      <link href="images/favicon2.png" rel="shortcut icon" type="image/x-icon">
      <link href="images/ThingyFav.png" rel="apple-touch-icon">
      <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-5260-3'], ['_trackPageview']);
        (function() {
          var ga = document.createElement('script');
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      </script>


      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://lah.com/css/colorbox.css" />

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="https://lah.com/js/jquery.colorbox-min.js"></script>
     
       var pollTimer;
      var nothngAvailableTimer;
      var callId;

      function myModal(msg, dismissable){
        $.colorbox({width:"50%", html:"<center><h1>" + msg + "</h1></center>", overlayClose: dismissable, escKey: dismissable, closeButton: dismissable});
      }

      function pollStatus(cid){
        var request = $.ajax({
          url: "https://Thingy.herokuapp.com/v1/calls/status",
          type: "GET",
          data: {
            api_key : '***',
            cal_id : cid
          },
          dataType: "json"
        });

        request.done(function(data) {
          if(data.status == "SENT"){
            return;
          } else if(data.status == "NOTHING"){
            nothingAvailable();
          } else {
            clearInterval(pollTimer);
            window.location.href = '/map.html?cid=' + callId;
          }
        });

        request.fail(function(jqXHR, textStatus) {
          console.log( "Request failed: " + textStatus );
        });
      }

      function nothingAvailable(){
        cancelTimers();
        $.colorbox.remove();
        myModal("Please try again in 5-10 minutes.", true);
      }

      // takes the form field value and returns true on valid number
    function valid_credit_card(value) {

      console.log( "Validating CC");
      // accept only digits, dashes or spaces
      if (/[^0-9-\s]+/.test(value)) return false;

      // The Luhn Algorithm. It's so pretty.
      var nCheck = 0, nDigit = 0, bEven = false;
      value = value.replace(/\D/g, "");

      for (var n = value.length - 1; n >= 0; n--) {
        var cDigit = value.charAt(n),
            nDigit = parseInt(cDigit, 10);

        if (bEven) {
          if ((nDigit *= 2) > 9) nDigit -= 9;
        }

        nCheck += nDigit;
        bEven = !bEven;
      }

      return (nCheck % 10) == 0;
    }



      function makeCall(){
        valid_credit_card($('#cc_number').val());
        console.log( "Request was submitted.");
        myModal("We are trying to find a screen . . .", false);
        nothngAvailableTimer = setTimeout(nothingAvailable, 60000);
        var request = $.ajax({
          url: "https://Thingy.herokuapp.com/v1/calls/request",
          type: "POST",
          data: {
            pickup_address : $('#pa').val(),
            dropoff_address : $('#da').val(),
            type : $('#type').val(),
            email : $('#email').val(),
            phone : $('#phone').val(),
            cc_number : $('#cc_number').val(),
            cc_exp_month : $('#cc_exp_month').val(),
            cc_exp_year : $('#cc_exp_year').val(),
            cc_cvv : $('#cc_cvv').val(),
            comments : $('#comments').val()
          },
          dataType: "json"
        });

        request.done(function(data) {
          if(data.status == "OK"){
            callId = data.id;
            pollTimer = setInterval(function () { pollStatus(data.id) }, 5000);
          } else {
            cancelTimers();
            $.colorbox.remove();
            myModal(data.reason, true);
          }
        });

        request.fail(function(jqXHR, textStatus) {
          console.log( "Request failed: " + textStatus );
        });
      }

      function cancelTimers(){
        clearTimeout(nothngTimer);

      }

  #wrapper {
      position: relative;
      display: inline-block;
      width: 100%;
      z-index: 1;
    }
    #wrapper input {
      padding-right: 14px;
    }
    #wrapper:after {
      content: "*";
      position: absolute;
      right: 15px;
      top: +12px;
      /*color: #ed9900;*/
      color: #39a2e2;
      z-index: 5;
    }

=======更新============

如果我使用这个html，留下所有其他代码，那么它的工作原理。我的内心有问题吗？我的身体会导致这种情况无法发挥作用？我没有任何内联CSS或javascript？

            <body>

        <form action="action_page.php">
          First name:<br>
          <input type="text" name="firstname" value="Mickey">
          <br>
          Last name:<br>
          <input type="text" name="lastname" value="Mouse">
          <br><br>
          <input type="submit" value="Submit">
        </form> 

        <p>If you click the "Submit" button, the form-data will be sent to a page called "action_page.php".</p>

        </body>

=====找到更新解决方案==========

这是在文件的底部。 所以不得不引用jquery。

 <script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>

Answer 1

我认为你需要添加最新的colorbox js ..

而不是

<script src="https://lah.com/js/jquery.colorbox-min.js"></script>

试试这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

并使用此Css：

而不是

<link rel="stylesheet" href="https://lah.com/css/colorbox.css" />

试试这个：

<link rel="stylesheet" href="http://static.foxycart.com/scripts/colorbox/1.3.9/style1/colorbox.css" />

jQuery.colorbox无法正常工作

1 个答案: