1. 程式人生 > >【鋒利的jQuery】中全域性事件ajaxStart、ajaxStop不執行

【鋒利的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全域性事件ajaxStartajaxStop執行

最近一直都在研究【鋒利的jQuery】,確實是一本好書,受益匪淺。但由於技術發展及版本更新等原因,裡面還是有些坑需要踩的。 比如:第六章七節中提到的全域性事件ajaxStart、ajaxStop照著案例敲結果並不會執行。 在查閱資料後,發現原來在jquery1.9+版本以後,ajax全域性事件需繫結到do

鋒利jQuery全局事件ajaxStartajaxStop執行

doc dem del loading hide 案例 var .ajax round 最近一直都在研究【鋒利的jQuery】,確實是一本好書,受益匪淺。但由於技術發展及版本更新等原因,裏面還是有些坑需要踩的。 比如:第六章七節中提到的全局事件ajaxStart、ajax

jQueryon註冊事件的時候處理函式自動執行

<!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.jsmongoose教程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函式來完成定