目錄

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

問題描述

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

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

當然上面這段代碼要放是base.js(所有頁面都要引入的基礎函數)里面,因為有好多頁面都存在這個問題.
問題來了,在某些頁面中,當執行上面的代碼時, ("forminput")還不存在,,這些元素是在頁面的 (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”
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 callbackjQuery.ready.promise().done( fn );return this; };

jQuery 用Deferred和promise等來控制等加載完成后執行.而done方法可以接受多個函數.

修改自己的$.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; };

測試,可用,順序是先執行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);

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。