Q:

issue with ajaxStart in jquery

data.php
<?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
<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>

Question:
when I clicked submit button, loading... never shows up, why?

A:

Starting from jQuery 1.8 ajaxStart/ajaxStop/... can only be bound to document (link). Please update your code to this:
$(document)
    .ajaxStart(function(){
        $('#preloader').show();
    }).ajaxStop(function(){
        $('#preloader').hide();
    });               

