在AJAX响应之后，翻转插件和javascript函数无法正常工作

Question

I'm using Flip plugin to create a div for each row of a MySQL table and bring results via AJAX, on div front I show the name and show some information on the div back. This is my code:

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;
  }

?>

The problem is Flip plugin and onclick javascript functions are not working, I also tried using this method:

$.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);
       } 
    });

Or this:

$(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);
  } 

I also checked this question, and I tried this :

$(".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);
} 

But it's still not working. How can I solve it?

I'd like your help.

Answer 1

Finally it works putting flip function in AJAX response:

$.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);
} 

If you have another alternative It would be great.