首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jquery中的ajaxStart问题

jquery中的ajaxStart问题
EN

Stack Overflow用户
提问于 2013-07-06 17:08:40
回答 2查看 405关注 0票数 0

data.php

代码语言:javascript
复制
<?php
for($i=0;$i<=10000000;$i++){    
}
$name = strtoupper($_REQUEST['urname']);
$birth = strtoupper($_REQUEST['urbirth']);
if(isset($name)){
    $html = "<p>Your name: <b>".$name."</b></p>";
    $html .= "<p>Your birthplace: <b>".$birth."</b></p>";   
    print($html);
}
?>

index.html

代码语言:javascript
复制
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {  
        $('#preloader').hide();     
        $('#preloader')
            .ajaxStart(function(){
                $(this).show();
            }).ajaxStop(function(){
                $(this).hide();
            });                                                 
        $('#form form').submit(function(){
            $('#content').empty();
            $.get('data.php', $(this).serialize(), function(data){                          
                $('#content').html(data);
            });         
            return false;
        });
    });
    </script>
</head>
<body>
<div id="form">
<form>
Name : <input type="text" name="urname"><br />
Birthplace : <input type="text" name="urbirth"><br />
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div id="preloader">loading...</div>
<div id="content">
</div>
</body>
</html>

问题:

当我点击submit按钮时,loading...从来没有出现,为什么?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-06 17:09:54

从jQuery 1.8开始,ajaxStart/ajaxStop/...只能绑定到document (link)。请将您的代码更新为:

代码语言:javascript
复制
$(document)
    .ajaxStart(function(){
        $('#preloader').show();
    }).ajaxStop(function(){
        $('#preloader').hide();
    });               
票数 1
EN

Stack Overflow用户

发布于 2013-07-06 17:10:47

代码语言:javascript
复制
$(document)
            .ajaxStart(function(){
                $('#preloader').show();
            }).ajaxStop(function(){
                $('#preloader').hide();
            }); 

如果只想显示提交表单的预加载器,请使用:

代码语言:javascript
复制
$('#form form').submit(function(){
            $('#content').empty();
            $('#preloader').show();
            $.get('data.php', $(this).serialize(), function(data){                          
                $('#content').html(data);
            }).always(function(){
                $('#preloader').hide();
            });  

        return false;
    });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17501443

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档