Question

我正在尝试追踪错误 TypeError：$（...）。clientSideCaptcha不是RegisterCapcha的函数（http://localhost:4382/xxx/index.html:98:31）

，我在angularJS项目工作。简单的问题，但我无法摆脱它。

我已经使用j查询实现了验证码，并且在点击时成功地在视图中工作但事情是我试图在其他视图中加载相同的验证码在加载但是验证码函数没有加载。

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

视图2： 具有相同RegisterCapcha（）的相同形式; onload中的脚本，但在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%;">

请提前帮助我解决它：）

Answer 1

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>

2）之后为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));
</script>

Answer 2

加载jQuery后

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

参考：

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

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>

Answer 4

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

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

照顾订单（Jquery优先）。

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

info += "<html><body bgcolor='#f1f7fe'><b>" +
    	"<input type=\"button\" onClick=\"sendVehicleId()\">button text</input></a></b><hr>" + 
            "</body></html>";

function sendVehicleId()
  alert("hello");
}

出于某种原因，您最后不想要导入脚本，请不要忘记：

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

某些插件在使用之前需要加载HTML。所以脚本开始结束。

TypeError：$（...）。不是一个功能

4 个答案: