TypeError: $(...). is not a function

Question

I'm trying to track down an error TypeError: $(...).clientSideCaptcha is not a function at RegisterCapcha (http://localhost:4382/xxx/index.html:98:31)

, am working in angularJS project. simple issue but i can't got out from it.

i have implemented a captcha using j query and successfully working in a view when on on-click but thing is i have try to load that same captcha in other view in on-load but captcha function is not loading.

in view1 captcha working fine code below

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%;">

script declared in 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: same form with same RegisterCapcha(); script in onload but calling in 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%;">

please help me to solve it thanks in advance :)

Answer 1

Include jQuery before all your scripts:

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

After that define $ variable for jQuery function like this:

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

Answer 2

After loading jQuery

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

Reference：

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