Flip 插件和 javascript 功能在 AJAX 响应后不工作
Flip plugin and javascript functions are not working after AJAX response
我正在使用 Flip 插件为 MySQL table 的每一行创建一个 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;
}
?>
问题是Flip插件和onclickjavascript功能没有用,我也试过用这个方法:
$.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);
}
但是还是不行。我该如何解决?
我需要你的帮助。
终于可以将翻转函数放入 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);
}
如果你有其他选择那就太好了。
我正在使用 Flip 插件为 MySQL table 的每一行创建一个 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;
}
?>
问题是Flip插件和onclickjavascript功能没有用,我也试过用这个方法:
$.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);
}
但是还是不行。我该如何解决?
我需要你的帮助。
终于可以将翻转函数放入 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);
}
如果你有其他选择那就太好了。