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)

Answer 1

After loading jQuery

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

Reference：

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

Answer 2

For use Jquery plug-in (library) you need to import Jquery first.

The better way is import all scripts at the end of your HTML.

Take care of the order (Jquery first).

Example of Jquery import (online version).

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

For some reason you don't want import script at the end, don't forget :

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

Some plug-in need HTML to be loaded before use them. So the script begins to end.

Answer 3

please include latest jquery before all the script tags. find latest jquery at https://code.jquery.com/ or use cdn

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

Answer 4

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>

2) 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));
</script>