я использую кувырок Плагин для создания div для каждой строки таблицы MySQL и получения результатов через 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;
}
?>
Проблема в кувырок плагин и по щелчку Функции 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);
}
Я тоже это проверял вопрос, и я попробовал это:
$(".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);
}
Но это все еще не работает. Как я могу решить это?
Мне нужна твоя помощь.
Наконец, это работает, помещая функцию flip в ответ 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);
}
Если у вас есть другая альтернатива, это было бы здорово.
Других решений пока нет …