title: Only the jQuery event handler needs to be in the $(document).ready(function....?
body: <p>I have code containing jQuery code, but not all of the jQuery code is located within the <code>$(document).ready</code> function...</p>
  
  <p>Only the event-handler is located within the document.ready function (which comes at the very end of the code - see bottom of my question/post for entire code). This event handler sends an AJAX POST request to the server upon the click of a <code>send</code> button.</p>
  
  <pre><code>       $(document).ready(function(){
              $('button.send').on('click',function(){
                  chatSend($('.draft').val());
                  $('.draft').val('');
              });
          });
  </code></pre>
  
  <p>However, there's other jQuery code before that <code>document.ready</code> function is performed...</p>
  
  <p>My question is, is it only necessary that the event-handler for this code be in the <code>document.ready</code> function? If so, why is that the case?</p>
  
  <p>Below is the ENTIRE CODE...</p>
  
  <pre><code>        var last_update_time;
  
          var current_time;
  
          var user_name=document.URL.match(/username=(.*)/)[1];
  
          var ajaxGet={
              url:'https://api.parse.com/1/classes/chats',
              type:'GET',
              data:'order=-createdAt'
          };
  
          function chatDisplay(object){
              object.filter(function(item){
                  prependListItem(item);
              });
              last_update_time=object[0].createdAt;
          }
  
          function chatFetch(callback){
              $.ajax(ajaxGet).done(function(serverData){
                  var serverString=serverData.results;
                  callback(serverString);
              });
          }
  
          function chatSend(sendString){
              var chatString=user_name+": "+sendString;
              $.ajax({
                  url:'https://api.parse.com/1/classes/chats',
                  type:'POST',
                  data:JSON.stringify({
                      text:chatString,
                      username:user_name
                  })
              });
          }
  
          function refreshChat(passed_obj){
              $('.messages li:first').remove();
              appendListItem(passed_obj);
              last_update_time=current_time;
          }
  
          function refreshMsg(object){
              current_time=object[0].createdAt;
              if(current_time!=last_update_time){
                  refreshChat(object[0]);
              };
          }
  
          function user_li_style(obj){
              var dynamicClass;
              var txtUser=obj.text.match(/[^:]*/i)[0];
              if (txtUser==user_name){
                  dynamicClass="myTxt";
              } else {
                  dynamicClass="otherTxt";
              }
              return dynamicClass;
          }
  
          function appendListItem(obj){
              $('.messages').append('&lt;li&gt;&lt;div class="'+user_li_style(obj)+'"&gt;'+chatTextFilter(obj)+' ('+obj.createdAt+')&lt;/div&gt;&lt;/li&gt;');
          }
  
          function prependListItem(obj){
              $('.messages').prepend('&lt;li&gt;&lt;div class="'+user_li_style(obj)+'"&gt;'+chatTextFilter(obj)+' ('+obj.createdAt+')&lt;/div&gt;&lt;/li&gt;');
          }
  
          function chatTextFilter(obj){
              var smile="&lt;img src='img/smile.png' alt=':)'&gt;";
              var myRegEx=/:\)/g;
              return userIdentify(obj).replace(myRegEx,smile);
          }
  
          function userIdentify(displayText){
              var replace_text="&lt;span class='myName'&gt;"+user_name+"&lt;/span&gt;";
              return displayText.text.replace(user_name,replace_text);
          }
  
          chatFetch(chatDisplay);
  
          setInterval(function(){
              chatFetch(refreshMsg)},2000);
  
          $(document).ready(function(){
              $('button.send').on('click',function(){
                  chatSend($('.draft').val());
                  $('.draft').val('');
              });
          });
  </code></pre>
  
  <p>Also, and this is unrelated, but why does the event-handler in this code not need a <code>preventDefault()</code> call, whereas the code in the following link (this is a link to code that creates a similar chat application) utilizes the <code>preventDefault()</code> in the relevant event handler...</p>
  
  <pre><code>        bindSendEvent: function () {
          $(".send").on("click", function (e) {
            var input = $(".draft");
            myChat.send(Chat.username + ": " + input.val());
            input.val("");
            e.preventDefault();
          });
        },
  </code></pre>
  
  <p><a href="https://github.com/joaostein/chatBuilder/blob/master/index.html" rel="nofollow">link for entire code to app B (from which the above bindSendEvent function is found)</a></p>