Flip плагин и функции JavaScript не работают после ответа AJAX

я использую кувырок Плагин для создания 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);
}

Но это все еще не работает. Как я могу решить это?

Мне нужна твоя помощь.

0

Решение

Наконец, это работает, помещая функцию 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);
}

Если у вас есть другая альтернатива, это было бы здорово.

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]