Why am I getting undefined is not a function when using jquery?

Question

HTML

more code here...

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://example.com/sites/all/modules/ac_modules/ac_exercise/ac_exercise.js?nkuo2r"></script>

more code here...

<div class="form-item form-type-textfield form-item-time-start">
  <label for="edit-time-start">Time Start </label>
 <input type="text" id="edit-time-start" name="time_start" value="11:28:12" size="4" maxlength="8" class="form-text" />
</div>

more code here...

Javascript - ac_exercise.js

$(document).ready(function(){ 
  $("#edit-time-start").on("change paste keyup", function() {
     alert($(this).val()); 
  });
});

In Chrome's console I get the following error: Uncaught TypeError: undefined is not a function - ac_exercise.js?nkuo2r:1 which is this line of code:

$(document).ready(function(){ 

Answer 1

(function ($) {
  $(document).ready(function(){

  your code here

  });
})(jQuery);

Answer 2

jQuery needs to be wrapped and passed in an anonymous closure like this in Drupal 7.

If you are writing code that needs to fire the document is ready, you could evaluate if you should make it a Drupal behavior or not.

(function ($) {
  $(document).ready(function(){

    $("#edit-time-start").on("change paste keyup", function() {
      alert($(this).val()); 
    });

  });
})(jQuery);

Answer 3

Please check your current JQuery library may not have any conflicts.

However, you can use the JQUERY at the bottom. Please refer this article