jsoneryの各json loadには動作しません。

Question

私はこのツータを使用しています：https://www.ostraining.com/images/coding/jquery-flip/demo/ これは完璧な作業です。このコード作業良いが、それは私がループJSON負荷でこの効果をロードしたい、私はJSONでデータをロードしていますので

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

に影響を与えるとの2画像を表示するので、私はそれが影響するとデータに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> 

イメージを表示していますが、効果がありません。私はload jsonの前に実行されるエフェクトを考えるので、うまくいきません。私を助けてください。ありがとうございました！

Answer 1

あなたは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 */ }) 
}); 

よう

何かを挿入した後、あなたがする必要がありますプラグインを初期化されていません。

イメージを既存のインスタンスに追加することもできます。そのためには

Answer 2

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

はこれを試してみてくださいマニュアルに概説されたい場合は、これが結合すべての機能がすでにロードされた要素 上ですることができるので、あなたが動的要素をロードしたい場合は、新しいロードされた要素に関数をバインドする必要があります。