0

高 AJAX 経由で画像をさらに読み込むことができる画像ギャラリーを作成しています。

fadeIn次のコードを使用して効果があります。

$('img').load(function() {
       $(this).fadeIn();
 });

これは、最初の画像セット (ページに読み込まれたもの) で機能しますが、AJAX 経由でさらに呼び出すと (以下のコードを参照)、$('img').load()もうティガーしていないようです。

$('#clickme').click(function(){
      $('.tile').fadeOut();
           $.post('http://localhost/wp-admin/admin-ajax.php',{
                   'action' : 'da_ajax_posts',
                   'data'   : 'foobarid'
                 },(function($data){
                 $('#container').html($data);


  }));

これは私のコードの残りの部分です:

<div id="container">
      <div class="tile w2 h2 t1 l1">
           <h2>Image10</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/img10.jpg">
           <p></p>
        </div>


        <div class="tile w1 h2 t1 l3">
           <h2>image9</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Chrysanthemum.jpg">
           <p></p>
        </div>


        <div class="tile w2 h1 t1 l4">
           <h2>Image8</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Desert.jpg">
           <p></p>
        </div>


        <div class="tile w2 h2 t2 l4">
           <h2>image7</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Hydrangeas.jpg">
           <p></p>
        </div>


        <div class="tile w1 h1 t3 l1">
           <h2>Image6</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/img10.jpg">
           <p></p>
        </div>


        <div class="tile w1 h1 t4 l1">
           <h2>image 5</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Jellyfish.jpg">
           <p></p>
        </div>


        <div class="tile w1 h2 t3 l2">
           <h2>Image4</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Koala.jpg">
           <p></p>
        </div>


        <div class="tile w1 h1 t3 l3">
           <h2>Image3</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Lighthouse.jpg">
           <p></p>
        </div>


        <div class="tile w1 h1 t4 l5">
           <h2>Image2</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Tulips.jpg">
           <p></p>
        </div>


        <div class="tile w2 h1 t4 l3">
           <h2>Image1</h2>
           <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Penguins.jpg">
           <p></p>
        </div>


</div>

よろしくお願いします。

4

3 に答える 3

2

live で load イベントを定義する必要があります。

$('img').live("load", function() {
    $(this).fadeIn();
});
于 2012-07-04T20:58:07.110 に答える
2

このイベントを ajax コールバックで再度バインドする必要があります。

この行「 $('#container').html($data);」の後に次のコードを記述します。

$('img').load(function() {
   $(this).fadeIn();
});
于 2012-07-04T20:58:24.247 に答える
1

liveは非推奨になりonました。代替品については、http: //api.jquery.com/on/を参照してください。

のようliveに、その目標は、最初にバインドしたときに存在しなかった要素に対してもトリガーされるイベントハンドラーをバインドすることです。

OPと同様の場合、必要なのは次のとおりです。

// binding the event to the body but restricting its scope to img tags
$('body').on('load', 'img', function() {
    $(this).fadeIn();
});
于 2013-10-29T15:31:28.220 に答える