javascript - 在 AJAX 响应后，翻转插件和 javascript 功能不起作用

问题描述

我正在使用Flip插件为 MySQL 表的每一行创建一个 div 并通过 AJAX 带来结果，在 div 前面我显示名称并在 div 后面显示一些信息。这是我的代码：

索引.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>

结果.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插件和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);
  }

我也检查了这个问题，我试过这个：

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

但它仍然无法正常工作。我该如何解决？

我需要你的帮助。

标签： javascriptphpjqueryajaxflip

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

javascript - 在 AJAX 响应后，翻转插件和 javascript 功能不起作用

问题描述

解决方案

推荐阅读