jquery更改ready方法调用顺序,在ready之后执行Js代码
Table of Contents
问题描述
我想要控制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方法
- easy test
$.fn.ready = function(){alert("hello,world");}
放到base.js中,发现所有页面在加载的时候,都不执行自己的ready方法了,而是弹出了"hello,world"
- 执行页面中的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);
