翻转插件和javascript函数在AJAX响应后不起作用
翻转插件和javascript函数在AJAX响应后不起作用
提问于 2018-08-04 05:27:57
我正在使用Flip插件为MySQL表的每一行创建一个div，并通过AJAX带来结果，在div前面我显示名称，在div后面显示一些信息。这是我的代码：
index.html
<div class="result"></div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script>
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
</script>result.php
<?php
$connect = mysqli_connect("localhost", "root", "mypass", "mydatabase");
$sql = "SELECT * FROM users";
$res = mysqli_query($connect,$sql);
$html='';
if(mysqli_num_rows($res)>0){
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)){
$id= $row['id'];
$html.='<div class="card_'.$id.' fff">
<div class="front">'.$row['name'].'
<button onclick="flip_back(\''.$id.'\');">MORE INFO</button>
</div>
<div class="back">'.$row['email'].'Back content
<button onclick="flip_front(\''.$id.'\');">RETURN</button>
</div></div>';
}
echo $html;
}
?>问题是翻转插件和onclick javascript函数不起作用，我也试过使用这种方法：
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
$(document).on("load",function(){
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
});或者这样：
$(document).on("load",function(){
$.post("test2.php",{
}).done(function(resp){
$(".result").html(resp);
});
});
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
} 我还检查了这个question，并尝试了以下内容：
$(".fff").flip({
trigger: 'manual',
onBefore: function(){
console.log('before starting the animation');
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
}
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
} 但它仍然不起作用。我该怎么解决它呢？
我需要你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-04 06:31:13
最后，它将翻转函数放入AJAX响应中：
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
$(".fff").flip({
trigger: 'manual'
});
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
} 如果你有其他选择，那就太好了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51680274
复制相关文章
相似问题