【鋒利的jQuery】中全域性事件ajaxStart、ajaxStop不執行

阿新 • • 發佈：2019-01-16

最近一直都在研究【鋒利的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函式來完成定

【鋒利的jQuery】中全域性事件ajaxStart、ajaxStop不執行

相關推薦