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);