获取不是函数错误,外部脚本未加载?

Getting not a function error, external script not loaded?

I'm trying to use an input mask script on my site. When I reference function from the external script I get the error $(...).inputmask is not a function. I'm thinking this may be because the script isn't being loaded first; however, I implemented require.js and the issue persists.

The two ways I've loaded the script:

I originally loaded the script straight from my server:

<script src="{% static 'jquery.inputmask.bundle.js' %}"></script>

Then Method 1:

<script data-main="{% static 'jquery.inputmask.bundle.js' %}" src="{% static 'require.js' %}"></script>

Now Method 2:

<script data-main="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js" src="{% static 'require.js' %}"></script>

I'm referencing the source in my script with:

$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});

I trouble shot a bunch of things that haven't worked but think I might just be overlooking a small thing. Any ideas?

I've also tried implementing:

  <script> $("#txt").inputmask({"mask":"(999) 999-9999"}); </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>

Which results in TypeError: $("#txt").inputmask is not a function. (In '$("#txt").inputmask({"mask":"(999) 999-9999"})', '$("#txt").inputmask' is undefined)

First give the inputmask.js reference and then give jquery.inputmask.js, this should work for input-mask plugin.

Check this Fiddle.

For more refernce: https://github.com/RobinHerbots/Inputmask/issues/1029

$("#txt").inputmask({"mask":"(999) 999-9999"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>


<html>
<input type="text" id="txt" />
</html>
Snippet & Fiddle works, give references in sequence order, 1. JQuery, 2. Inputmask.js & 3. jquery.inputmask.js.
This results in TypeError: $("#txt").inputmask is not a function. (In '$("#txt").inputmask({"mask":"(999) 999-9999"})', '$("#txt").inputmask' is undefined). editing the question to show my implementation.