AJAX调用后动画脚本不起作用 [英] Animation script not working after AJAX call
问题描述
使用 AJAX 进行页面调用后，我的动画脚本出现了一些问题.在这种情况下，如果在移动屏幕浏览器中打开该页面，我将加载该页面.我有2个文件分别称为index.php和mobile.php.我在index.php中放置了 AJAX ，因此当用户openend www.example.com 时，它将首先加载index.php，然后检查用户是否在移动浏览器中打开了该页面调用 AJAX 加载mobile.php.在mobile.php中，有一些旋转木马滑块动画，当它用AJAX加载时，滑块动画不再起作用.可能是在触发onload时JQuery尚未初始化.
I have some problem with my animation script after page call with AJAX. In this case I load that page if opened in mobile screen browser. I have 2 files called index.php and mobile.php. I put AJAX in index.php so when user openend www.example.com it will load index.php first and then check if user open that page in mobile browser it will make AJAX call to load mobile.php. In mobile.php there is some carousel slider animation and when it load with AJAX the slider animation not working anymore. It's maybe the JQuery not initialized when onload is triggered.
这是我在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 加载时动画不起作用.请任何人都可以给我一些建议以解决此问题.谢谢.
I don't know why when mobile.php load with AJAX the animation not working. Please anyone can give me some advise to solve this. Thanks.
推荐答案
如果您发现用户使用如下所示的移动设备，则需要重定向页面.还有一件事，您尚未在mobile.php中添加Carousel jquery插件
You need to redirect the page if you found user using mobile like below. One more thing, You have not added Carousel jquery plugin in mobile.php
<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调用后动画脚本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
