类型错误：$（...）不是一个函数。

Question

我正在追踪一个错误，涉及IT技术。错误信息为TypeError: $(...).clientSideCaptcha不是一个函数，在RegisterCapcha(http://localhost:4382/xxx/index.html:98:31)处出现。 我在AngularJS项目中工作，这个问题很简单，但我无法解决它。

我已经使用jQuery实现了验证码，并且在视图中成功地通过点击事件运行。但问题是，我尝试在其他视图中加载相同的验证码，但验证码功能没有加载。

在view1中，验证码正常工作，代码如下：

view1.html

<a onclick="RegisterCapcha(); ReverseContentDisplay('job-apply'); return true;"
       href="javascript:ReverseContentDisplay('job-apply')">


<form  id="careersForm" > 
      <table class="apply-form">
       <tr>
        <td>First Name  </td>
        <td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
       </tr>
<tr>
              <td colspan="2" class="applytable" >
                    <div class="editor-field">
                        <p>
                            <label>
                                Enter the text shown below:
                                <input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
                        <p id="captcha">
                        </p>
                    </div>
                </td>
            </tr>
       <tr>
 <input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">

在index.html中声明的脚本

<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
<script type="text/javascript">

    function EnableApply() {

        var OriginalCaptcha = $('#careersForm').data('captchaText');
        var userCapcha = $('#captchaText').val();
        if (OriginalCaptcha == userCapcha) {
            $('#careerbtn').removeAttr('disabled');
        }
        else {
            $('#careerbtn').attr('disabled', 'disabled');
        }
    }

    function RegisterCapcha() {
        $("#captcha").html(''); //reset the generated captcha first
        $("#captchaText").val('');
        $("#careersForm").clientSideCaptcha({
            input: "#captchaText",
            display: "#captcha",
        });            
    }
</script>

view2：在onload中具有相同的RegisterCapcha()脚本，但在view2中调用同一表单

<script type="text/javascript">

    $(document).ready(function () { RegisterCapcha(); });
</script>


<form  id="careersForm" > 
          <table class="apply-form">
           <tr>
            <td>First Name  </td>
            <td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
           </tr>
    <tr>
                  <td colspan="2" class="applytable" >
                        <div class="editor-field">
                            <p>
                                <label>
                                    Enter the text shown below:
                                    <input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
                            <p id="captcha">
                            </p>
                        </div>
                    </td>
                </tr>
           <tr>
     <input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">

请帮助我解决这个问题，提前表示感谢 :)

- Rakyir

---

请在你的代码中引用jQuery。将它放在reCAPTCHA JS之前。 - Anoop Joshi P

Answer 1

在所有脚本之前引入jQuery：

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

接下来，像这样为jQuery函数定义$变量：

<script type="text/javascript">
(function($){
    function EnableApply() {

        var OriginalCaptcha = $('#careersForm').data('captchaText');
        var userCapcha = $('#captchaText').val();
        if (OriginalCaptcha == userCapcha) {
            $('#careerbtn').removeAttr('disabled');
        }
        else {
            $('#careerbtn').attr('disabled', 'disabled');
        }
    }

    function RegisterCapcha() {
        $("#captcha").html(''); //reset the generated captcha first
        $("#captchaText").val('');
        $("#careersForm").clientSideCaptcha({
            input: "#captchaText",
            display: "#captcha",
        });            
    }
}(jQuery || window.jQuery));
</script>

- Ivijan Stefan Stipić

Answer 2

加载jQuery后

<script src='jquery.js'></script>    
if (typeof $ == 'undefined') {
   var $ = jQuery;
}

Reference：

https://v123.tw/fix-jquery-typeerror-not-function/

- Ann

Answer 3

请在所有的脚本标签之前包含最新的jQuery。 在https://code.jquery.com/找到最新的jQuery， 或者使用CDN。

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

- Kuldeep Kumawat

Answer 4

要使用Jquery插件（库），您需要首先导入Jquery。

更好的方法是在HTML末尾导入所有脚本。

注意顺序（先导入Jquery）。

Jquery导入示例（在线版本）。

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

由于某些原因，您不想在最后导入脚本，请不要忘记：

$(document).ready(function(){//code});

一些插件需要在使用之前加载HTML。因此，脚本开始结束。

- Alexis