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 ready处理程序内部，以便代码在元素存在之后才会运行。

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

只有jQuery事件处理程序需要在$（document）.ready（function ....？

1 个答案: