【鋒利的jQuery】中全域性事件ajaxStart、ajaxStop不執行
最近一直都在研究【鋒利的jQuery】,確實是一本好書,受益匪淺。但由於技術發展及版本更新等原因,裡面還是有些坑需要踩的。
比如:第六章七節中提到的全域性事件ajaxStart、ajaxStop照著案例敲結果並不會執行。
在查閱資料後,發現原來在jquery1.9+版本以後,ajax全域性事件需繫結到document物件上才能觸發。
下面是各版本不同寫法:
<html> <head> <meta charset="utf-8"> <style> #loading { position: absolute; top:0; left:0; right: 0; bottom: 0; background: rgba(0,0,0,.2); display: none; } #loading span { position: absolute; top: 48%; left: 48%; } </style> </head> <body> <div id="loading"><span>loading...</span></div> <form id="demo"> <input type="text" value="demo1" name="demo1"> <input type="text" value="demo2" name="demo2"> <input type="text" value="demo3"name="demo3"> <input type="submit" value="提交" id="submit"> </form> </body> </html>
<script> $(function(){ $("#submit").click(function(){ // var data = $("form").serializeArray(); var data = $("form").serialize(); $.ajax({ type:"get", url:"1.php", data:data, dataType:"json", success:function(data){ console.log(data); }, error:function(xhr,error){ console.log(error); } }) }) // 1.9 以前寫法 $("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }) // 1.9+ 之後寫法 $(document).ajaxStart(function(){ $("#loading").show(); }).ajaxStop(function(){ $("#loading").hide(); })
// 以上兩種簡寫
// 1.9 以前
$("#loading").on("ajaxStart ajaxStop",function(){
$(this).toggle();
})
// 1.9+ 以後
$(document).on("ajaxStart ajaxStop",function(){ $("#loading").toggle(); }) }) </script>
相關推薦
【鋒利的jQuery】中全域性事件ajaxStart、ajaxStop不執行
最近一直都在研究【鋒利的jQuery】,確實是一本好書,受益匪淺。但由於技術發展及版本更新等原因,裡面還是有些坑需要踩的。 比如:第六章七節中提到的全域性事件ajaxStart、ajaxStop照著案例敲結果並不會執行。 在查閱資料後,發現原來在jquery1.9+版本以後,ajax全域性事件需繫結到do
【鋒利的jQuery】中全局事件ajaxStart、ajaxStop不執行
doc dem del loading hide 案例 var .ajax round 最近一直都在研究【鋒利的jQuery】,確實是一本好書,受益匪淺。但由於技術發展及版本更新等原因,裏面還是有些坑需要踩的。 比如:第六章七節中提到的全局事件ajaxStart、ajax
【jQuery】on註冊事件的時候處理函式自動執行
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> &l
【張其中】中本聰,我們究竟需要怎樣的加密貨幣?
地方 隱藏 什麽是 資產 bsp 禁止 實現 gin 無法 作者介紹:張其中,中科院碩士,連續創業者,樂家app創始人,花貓快問聯合創始人,鏈寶科技聯合創始人,關註EOS公鏈生態發展,致力於基於EOS的DAPP應用實踐與產品研究。這篇文章早該寫了,沒寫的原因,一來是有點懶,
【穩定方案】中星微ZA7783A:MIPI轉LVDS/RGB視訊轉換晶片方案
2、原廠:中星微 2.1、ZA7783 2.1.1 功能:ZA7783是一顆將單路MIPI DSI訊號轉換成單路LVDS/TTL訊號的轉接晶片,其應用圖如下: 2.1.2產品特徵: ZA7783是一顆多功能轉換晶片,其轉換功能如下: MODE1: MIPI DSI RX =>
【論文翻譯】中英對照翻譯--(Attentive Generative Adversarial Network for Raindrop Removal from A Single Image)
【開始時間】2018.10.08 【完成時間】2018.10.09 【論文翻譯】Attentive GAN論文中英對照翻譯--(Attentive Generative Adversarial Network for Raindrop Removal from A Single Imag
【資料結構】中序遍歷與後序遍歷構造二叉樹
根據一棵樹的中序遍歷與後序遍歷構造二叉樹。 具體程式碼如下: struct TreeNode { int val; struct TreeNode *left; struct TreeNode *right; }; struct TreeNod
【深入淺出jQuery】原始碼淺析2--奇技淫巧
原文:http://www.cnblogs.com/coco1s/p/5303041.html 最近一直在研讀 jQuery 原始碼,初看原始碼一頭霧水毫無頭緒,真正靜下心來細看寫的真是精妙,讓你感嘆程式碼之美。 其結構明晰,高內聚、低耦合,兼具優秀的效能與便利的擴充套件性,在瀏覽器的相容性
【深入淺出jQuery】原始碼淺析--整體架構
原文:http://www.cnblogs.com/coco1s/p/5261646.html 最近一直在研讀 jQuery 原始碼,初看原始碼一頭霧水毫無頭緒,真正靜下心來細看寫的真是精妙,讓你感嘆程式碼之美。 其結構明晰,高內聚、低耦合,兼具優秀的效能與便利的擴充套件性,在瀏覽器的相容性
【MindFusion教程】帶有JavaScript事件的互動式日曆(上)
下載MindFusion.WinForms Pack最新版本 在本文中,我們將建立一個類似Google的互動月度日曆,使用者可以在該日曆中實時建立,編輯和刪除約會。我們 將使用JavaScript Scheduler。以下是完成的應用程式的螢幕截圖: 一 專案設定 我們需要引用以下檔案來開始開發
《瘋狂Java講義(第4版)》-----第11章【AWT程式設計】(AWT常用元件、事件處理)
AWT常用元件 雖說是常用元件,如果不經常使用,還是比較陌生的!!!暫且根據書本列出來一些,先結合書上例項認識之,待之後結合實際案例選擇用之、研究之(參看官方API)! Button Canvas(用於繪圖的畫布) Checkbox CheckboxGroup(
【5701 HDU】中位數計數(思維)
Problem Description: 中位數定義為所有值從小到大排序後排在正中間的那個數,如果值有偶數個,通常取最中間的兩個數值的平均數作為中位數。 現在有n個數,每個數都是獨一無二的,求出每個數在多少個包含其的區間中是中位數。 Input: 多組測試資料
【圖文解析 】MapReduce 全域性計數器
MapReduce 全域性計數器 1、介紹 計數器是用來記錄 job 的執行進度和狀態的。它的作用可以理解為日誌。我們可以在程式的 某個位置插入計數器,記錄資料或者進度的變化情況。 MapReduce 計數器(Counter)為我們提供一個視窗,用於觀察 MapR
【Node.js】mongoose教程02--開啟、關閉資料庫,監聽資料庫事件
connection的事件列表可點選檢視官方文件或./node_modules/mongoose/lib/connection.js#Connection()12345678910111213141516171819202122232425262728293031323334353637// 匯入mongoo
【測繪專用】中海達全站儀資料匯入南方CASS
先從全站儀匯入資料到電腦(我是用U盤的),然後開啟資料檔案後是這個樣子。 上圖並不是匯出後原先的資料格式。匯出檔案後,它的資料格式實際上不是上面這樣的,要經過處理後才行。從中海達下載資料傳輸軟體來對資料進行處理。 下載後,解壓後如下圖: 開啟上面的.exe檔案 會彈出這個視窗
【資料結構】中實現一個位圖
點陣圖法就是bitmap的縮寫。關於bitmap,就是用每一位來存放某種狀態,適用於大規模資料,但資料狀態又不是很多的情況。 通常是用來判斷某個資料存不存在的。 點陣圖的優缺點: 優點: (1),是速
74HC595在【8x8LED點陣】中的使用
前幾天學了點陣的顯示,今天按自己的思路來總結一下。首先介紹一下點陣的顯示原理。點陣的電路圖和之前學過的矩陣按鍵的電路圖是相似的。每個燈就相當於座標圖中的一個點,具有唯一獨特的座標位置,這樣就可以通過引腳
【持更】OI大事件
小學的就沒啥好說的啦 OI大事記: 初一的時候noip2017普及 打暴力打到了350,省一滾粗,從此有了下面的東西 初一寒假參加gdkoi 50分滾粗 初一下學年省賽gdoi 80分滾粗 (上面可能都是失誤吧,也可能真的是我太菜) 初一下學年犯低階錯誤
【區域填充】中的種子填充演算法
假定:①邊界畫素給定 ②內部一個畫素(種子)給定–適合互動 (1)四連通法(4-connected) 向四個方向檢查,填色,擴散。遍歷區域內所有畫素。 (2)八連通法(8-connected) 向四個方向檢查,填色,擴散。遍歷區域內所有畫素。
【網路程式設計】處理定時事件(二)---利用訊號通知
前言 這篇的誕生也很不容易,感謝Jung Zhang學長和瑞神的橘子。 在上一篇,我們通過Redis對定時事件的處理有了一定的認識,今天我們繼續按照《高效能伺服器程式設計》上邊的思路,用C++來實現一個小demo。 本篇中,我們將利用alarm函式來完成定