目錄

• 問(wèn)題描述
• 在所有的ready方法之后執(zhí)行上面的方法
• 重寫(xiě)$.fn.ready方法
• 查看$.fn.ready的源碼定義
• 修改自己的$.fn.ready
• 閉包,增加安全性

問(wèn)題描述

我想要控制Input,回車(chē)不提交表單,思路如下:

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

當(dāng)然上面這段代碼要放是base.js(所有頁(yè)面都要引入的基礎(chǔ)函數(shù))里面,因?yàn)橛泻枚囗?yè)面都存在這個(gè)問(wèn)題.
問(wèn)題來(lái)了,在某些頁(yè)面中,當(dāng)執(zhí)行上面的代碼時(shí), ("forminput")還不存在,,這些元素是在頁(yè)面的 (function(){})–(我把它叫做ready方法)中產(chǎn)生的..
所以,現(xiàn)在就有一個(gè)需求 在所有的ready方法之后執(zhí)行上面的方法

在所有的ready方法之后執(zhí)行上面的方法

jQuery的ready方法如下:

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

或者

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

jQuery的方法分兩種,一種是$.extend等,另一種是((“button”).on(…),(定義為).fn.on)從上面分析,ready方法應(yīng)該屬于第二種
所以我打算重新ready方法

重寫(xiě)$.fn.ready方法

easy test

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

放到base.js中,發(fā)現(xiàn)所有頁(yè)面在加載的時(shí)候,都不執(zhí)行自己的ready方法了,而是彈出了”hello,world”
1. 執(zhí)行頁(yè)面中的ready方法

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

執(zhí)行結(jié)果是,既執(zhí)行了自己的ready方法(在里面寫(xiě)了個(gè)alert(1)做為測(cè)試),也執(zhí)行了后續(xù)方法..
但是,頁(yè)面沒(méi)有加載出來(lái),因?yàn)榇蠹叶贾?ready方法是當(dāng)頁(yè)面加載完成才去執(zhí)行的,而現(xiàn)在是當(dāng)運(yùn)行到$(function(){})這里的時(shí)候,就執(zhí)行了,而沒(méi)有等待頁(yè)面加載..

查看$.fn.ready的源碼定義

源碼定義如下:

jQuery.fn.ready = function( fn ) {// Add the callbackjQuery.ready.promise().done( fn );return this; };

jQuery 用Deferred和promise等來(lái)控制等加載完成后執(zhí)行.而done方法可以接受多個(gè)函數(shù).

修改自己的$.fn.ready

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

測(cè)試,可用,順序是先執(zhí)行fn(頁(yè)面中的多個(gè)ready方法),后執(zhí)行自己的方法,而此時(shí)input已經(jīng)創(chuàng)建成功了,即能訪問(wèn)到了

閉包,增加安全性

最終代碼如下:

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

總結(jié)

以上是生活随笔為你收集整理的jQuery控制在ready之后执行方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。