Question

Ajax stop / Ajax start只在第一次加载页面后点击任一按钮时才起作用，我不明白为什么。如果在初始单击后单击任一按钮，则不会显示加载div。每当我点击Click 1或Click 2按钮时，我想显示加载div，并且一旦内容完全加载，div就会消失。请参阅以下代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function() { 
   $('#loading').hide().ajaxStart( function() {
    $(this).show();
 }).ajaxStop ( function(){
    $(this).hide();
});

$(document).on('click', '.menu1', function(){
 $('.maincontent').load("1.php");
});

$(document).on('click', '.menu2', function(){
 $('.maincontent').load("2.php");
});
});

</script>

<style>
  #loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
  }

  #loading-image {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 100;
  }
</style>
</head>
<body>
<button class="menu1">Click 1</button>
<button class="menu2">Click 2</button>

<div class="maincontent">
  <div id="loading">
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
  </div>
</div>
</body>
</html>

Ajax Start Ajax Stop只能运行一次

0 个答案: