jquery更改ready方法調用順序,在ready以後執行Js代碼
Table of Contents
問題描述
我想要控制Input,回車不提交表單,思路以下: javascript
$(function(){
$("form input").on("keypress",function(event){
if(event.keycode == 13){
return false;
}
})
})
固然上面這段代碼要放是base.js(全部頁面都要引入的基礎函數)裏面,由於有好多頁面都存在這個問題. 問題來了,在某些頁面中,當執行上面的代碼時,$("form input")還不存在,,這些元素是在頁面的$(function(){})–(我把它叫作ready方法)中產生的.. 因此,如今就有一個需求 在全部的ready方法以後執行上面的方法 css
在全部的ready方法以後執行上面的方法
jQuery的ready方法以下: java
$(function(){
//....
});
或者 jquery
$(document).ready(function(){
//....
});
jQuery的方法分兩種,一種是$.extend等,另外一種是\(("button").on(...),(定義爲\).fn.on)從上面分析,ready方法應該屬於第二種 因此我打算從新ready方法 sql
重寫$.fn.ready方法
- easy test
$.fn.ready = function(){alert("hello,world");}
放到base.js中,發現全部頁面在加載的時候,都不執行本身的ready方法了,而是彈出了"hello,world" promise
- 執行頁面中的ready方法
$.fn.ready = function(func){
if(func){ //若是有本身的ready方法,
func(); //運行該方法
}
alert("hello,world");
}
執行結果是,既執行了本身的ready方法(在裏面寫了個alert(1)作爲測試),也執行了後續方法.. 可是,頁面沒有加載出來,由於你們都知道,ready方法是當頁面加載完成纔去執行的,而如今是當運行到$(function(){})這裏的時候,就執行了,而沒有等待頁面加載.. 安全
查看$.fn.ready的源碼定義
源碼定義以下: bash
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已經建立成功了,即能訪問到了 ide
閉包,增長安全性
最終代碼以下:
(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);