Javascript 每个json加载中的Jquery.html不起作用

我和这个图坦卡蒙一起工作： 这工作做得很好。这段代码工作得很好，它显示了2个影响图像

<div id="flip">
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
    <div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
        <img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
    </div>
    <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
        <img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
    </div>
</div>
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
    <div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
        <img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
    </div>
    <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
        <img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
    </div>
</div>  
</div>

因为我是通过json加载数据的，所以我想在循环json加载中加载这个效果，我想让它在数据中显示10个图像，并带有影响，我的代码：

<div id="flip">

</div>
<script>
$(document).ready(function(){
var url="http://localhost/service/load_data.php";
//load 10 image
$.getJSON(url,function(result){
$.each(result, function(i, field){
  var id=field.id;
  var img=field.img;
  $('#flip').append('<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;"><div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div></div> ');
});
});
});
</script>

$（文档）.ready（函数（）{
变量url=”http://localhost/service/load_data.php";
//加载10个图像
$.getJSON（url、函数（结果）{
$.each（结果、函数（i、字段）{
var id=field.id；
var img=field.img；
$（'#flip'）。附加（''）；
});
});
});

---

它不显示图像，但不起作用。我认为效果是在加载json之前运行的，所以它不起作用。请帮帮我。谢谢大家!

您没有初始化插件，插入html后需要初始化插件

差不多

$.getJSON(url, function(result) {
  var $flip = $('#flip')
  $.each(result, function(i, field) {
    var id = field.id;
    var img = field.img;
    $flip.append('<div id="flip....../div> ');
  });
  $flip.flip({ /* plugin options here */ })
});

$.getJSON（url、函数（结果）{
变量$flip=$（“#flip”）
$.each（结果、函数（i、字段）{
var id=field.id；
var img=field.img；
$flip.append（“

$（文档）.ready（函数（）{
变量url=”http://localhost/service/load_data.php";
//加载10个图像
$.getJSON（url、函数（结果）{
$.each（结果、函数（i、字段）{
var id=field.id；
var img=field.img；
$（“#翻转此”）.append（“”）；
$（“#翻转这个”）。翻转({
触发器：“悬停”
});
});
});
});

试试这个，这可能是因为所有函数绑定都在已经加载的元素上
如果你想动态加载元素，你还需要将函数绑定到新加载的元素。
是的，它可以工作，但单击时会影响工作，而不是悬停。也许我会尝试。你需要阅读插件文档，按照你想要的配置方式设置适当的选项。啊，第二次尝试，它可以工作，只需调用flip函数。谢谢你非常感谢你。
        <div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
    </div> 
    <script>
    $(document).ready(function(){
    var url="http://localhost/service/load_data.php";
    //load 10 image
    $.getJSON(url,function(result){
    $.each(result, function(i, field){
      var id=field.id;
      var img=field.img;
      $('#flip-this').append('<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div>');
        $("#flip-this").flip({
            trigger: 'hover'
        });
    });
    });

    });
    </script>