Question

使用 AJAX 进行页面调用后，我的动画脚本出现问题。在这种情况下，如果在移动屏幕浏览器中打开，我加载该页面。我有2个名为index.php和mobile.php的文件。我在index.php中添加 AJAX ，因此当用户打开 www.example.com 时，它会先加载index.php，然后检查用户是否打开该页面移动浏览器会调用 AJAX 来加载mobile.php。在mobile.php中有一些轮播滑块动画，当它加载AJAX时，滑块动画不再起作用。可能是在触发onload时没有初始化JQuery。

这是index.php中的 AJAX ：

    <script>
        window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             $.ajax({
                    'type': 'POST',
                    'url': 'mobile.php',
                    'data': {test:'test'},
                    'success': function(response) {
                        //alert(response);
                        $("html").html(response);
                    }
                });
        }
    </script>

这是我的mobile.php：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            background-color: #eaeaea;
        }
    </style>
</head>
<body>
<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="1.png" alt="Los Angeles" style="width:25%;">
      </div>

      <div class="item">
        <img src="2.png" alt="Chicago" style="width:25%;">
      </div>

      <div class="item">
        <img src="3.png" alt="New york" style="width:25%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>

我不知道为什么mobile.php加载 AJAX 时动画无效。请有人给我一些建议来解决这个问题。感谢。

Answer 1

如果您发现用户使用移动设备，则需要重定向该页面，如下所示。还有一件事，你还没有在mobile.php中添加Carousel jquery插件

<script>
        window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             window.location.href = 'mobile.php';             
         }
</script>

AJAX调用后动画脚本无法正常工作

1 个答案: