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

本文轉載自查看原文 2017-06-10 22:04 4389 jQuery

最近一直都在研究【鋒利的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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 事件綁定之鼠標懸停 -入門-進階-精通-骨灰（來自鋒利的jQuery）鋒利的js前端分頁之jQuery JQuery中的事件以及動畫關於JQuery中的事件冒泡 jQuery 中的鼠標事件 Jquery中on綁定事件點擊一次執行多次的解決辦法 jQuery全局Ajax事件處理器在Vue組件中獲取全局的點擊事件 Vue中全局監聽鍵盤事件在Vue組件中獲取全局的點擊事件