只有 jQuery 事件处理程序需要在 $(document).ready(function....？答案

【问题标题】：Only the jQuery event handler needs to be in the $(document).ready(function....?只有 jQuery 事件处理程序需要在 $(document).ready(function....？
【发布时间】：2014-02-02 06:33:01
【问题描述】：

我有包含 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)

【问题讨论】：

至于您的第二个问题（请每个...问题 1 个问题。）如果您需要阻止在所述事件正常发生时发生的默认操作，您只需要 e.preventDefault()。跨度>

标签： jquery event-handling preventdefault document-ready

【解决方案1】：

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

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

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

【讨论】：