jquery - 只有 jQuery 事件处理程序需要位于 $(document).ready(function....?

Question

我有包含 jQuery 代码的代码，但并非所有 jQuery 代码都位于 $(document).ready 函数中...

只有事件处理程序位于 document.ready 函数中(它位于代码的最后 - 请参阅我的问题/帖子的底部以获取整个代码)。单击send 按钮后，此事件处理程序将向服务器发送 AJAX POST 请求。

       $(document).ready(function(){
            $('button.send').on('click',function(){
                chatSend($('.draft').val());
                $('.draft').val('');
            });
        });

但是，在执行 document.ready 函数之前还有其他 jQuery 代码...

我的问题是，这段代码的事件处理程序是否只需要位于 document.ready 函数中？如果是这样，为什么会这样？

下面是完整的代码...

        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('<li><div class="'+user_li_style(obj)+'">'+chatTextFilter(obj)+' ('+obj.createdAt+')</div></li>');
        }

        function prependListItem(obj){
            $('.messages').prepend('<li><div class="'+user_li_style(obj)+'">'+chatTextFilter(obj)+' ('+obj.createdAt+')</div></li>');
        }

        function chatTextFilter(obj){
            var smile="<img src='img/smile.png' alt=':)'>";
            var myRegEx=/:\)/g;
            return userIdentify(obj).replace(myRegEx,smile);
        }

        function userIdentify(displayText){
            var replace_text="<span class='myName'>"+user_name+"</span>";
            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('');
            });
        });

此外，这是不相关的，但是为什么此代码中的事件处理程序不需要 preventDefault() 调用，而以下链接中的代码(这是指向以下代码的链接)创建一个类似的聊天应用程序)在相关事件处理程序中利用 preventDefault()...

        bindSendEvent: function () {
        $(".send").on("click", function (e) {
          var input = $(".draft");
          myChat.send(Chat.username + ": " + input.val());
          input.val("");
          e.preventDefault();
        });
      },

link for entire code to app B (from which the above bindSendEvent function is found)

Answer 1

阅读 $(document).ready() 的作用:http://api.jquery.com/ready

如果代码与 dom 交互，并且会在元素存在之前执行，您可以将代码移至 dom 就绪处理程序内部，以便代码在元素存在之前不会运行。

遗憾的是，文档就绪处理程序中包含的代码比实际需要的代码多得多，这很常见，导致代码的执行时间稍晚于其他情况。