jQuery控制在ready之后执行方法

目录

• 问题描述
• 在所有的ready方法之后执行上面的方法
• 重写$.fn.ready方法
• 查看$.fn.ready的源码定义
• 修改自己的$.fn.ready
• 闭包,增加安全性

问题描述

我想要控制Input,回车不提交表单,思路如下:

$(function(){
    $("form input").on("keypress",function(event){
        if(event.keycode == 13){
            return false;
        }
    })
})

当然上面这段代码要放是base.js(所有页面都要引入的基础函数)里面,因为有好多页面都存在这个问题.
问题来了,在某些页面中,当执行上面的代码时,$("form input")还不存在,,这些元素是在页面的$(function(){})–(我把它叫做ready方法)中产生的..
所以,现在就有一个需求 在所有的ready方法之后执行上面的方法

在所有的ready方法之后执行上面的方法

jQuery的ready方法如下:

$(function(){
//....
});

或者

$(document).ready(function(){
//....
});

jQuery的方法分两种,一种是$.extend等,另一种是((“button”).on(…),(定义为).fn.on)从上面分析,ready方法应该属于第二种
所以我打算重新ready方法

重写$.fn.ready方法

1. easy test

   $.fn.ready = function(){alert(“hello,world”);}

放到base.js中,发现所有页面在加载的时候,都不执行自己的ready方法了,而是弹出了”hello,world”
1. 执行页面中的ready方法

$.fn.ready = function(func){
if(func){   //如果有自己的ready方法,
 func();    //运行该方法
}
alert("hello,world");
}

执行结果是,既执行了自己的ready方法(在里面写了个alert(1)做为测试),也执行了后续方法..
但是,页面没有加载出来,因为大家都知道,ready方法是当页面加载完成才去执行的,而现在是当运行到$(function(){})这里的时候,就执行了,而没有等待页面加载..

查看$.fn.ready的源码定义

源码定义如下:

jQuery.fn.ready = function( fn ) {

        // Add the callback
        jQuery.ready.promise().done( fn );

        return this;
};

jQuery 用Deferred和promise等来控制等加载完成后执行.而done方法可以接受多个函数.

修改自己的$.fn.ready

jQuery.fn.ready = function( fn ) {
        // Add the callback
        jQuery.ready.promise().done(fn,function(){
        $("form input").on("keypress",function(event){
            if(event.keycode == 13){
                return false;
            }
        })
    });
        return this;
};

测试,可用,顺序是先执行fn(页面中的多个ready方法),后执行自己的方法,而此时input已经创建成功了,即能访问到了

闭包,增加安全性

最终代码如下:

(function($){
        $.fn.ready = function( fn ) {
                $.ready.promise().done(fn,function(){
                        $("form input").on("keypress",function(event){
                                if(event.keyCode == 13){
                                        return false;
                                }
                        });
                });
                return this;
        };
})(jQuery);