"undefined"を返すjQueryのロード

Question

私は現在、ギャラリーのリンクをクリックすると、jQuery load()関数を介してパーマリンクからイメージを取得するWordpressサイトのギャラリーページを作成しています。

しかし、すべてのギャラリーリンクを1つずつ繰り返しクリックしている間に、他の試みが成功する場合でも、画像がまったく読み込まれない時間があります。コンソールを見ると、下のjQuery関数のどこかでurlに "undefined"が返され、404エラーが発生する可能性があることがわかります。

HTML：

<article class="post"> 
    <a href="#" data-href="<?php the_permalink(); ?>" class="meta"> 
    <p> 
     <span class="category"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> 
     <span class="title"><?php echo get_the_title(); ?></span> 
    </p> 
    </a> 
</article> 

JS：

$("#gallery").fadeIn(function() { 
    var permalink = $(event.target).attr("data-href"); 

    $(this).append("<div class='slides'></div>") 
    $("#gallery .slides").delay(1000).load(permalink + " img", function() { 

     $("#gallery .slides img").wrap("<div class='slide'></div>"); 

     $(".slide").each(function() { 
      var src = $(this).find("img").attr("src"); 
      $(this).css({ 
       "background": "url(" + src + ")" 
      }); 
      $(this).empty(); 
     }); 

     $('.slides').anyslider(); 

    }); 
}); 

ライブデモ： trivecs.com/work

スクリーンショット： の

Answer 1

パーマリンクは、それが表示#galleryフェードインイベントの範囲にあるため、未定義で外に移動して、あなたは何のトラブルを取得しません：

$(document).on('click', ".page-id-5 .post .meta", function(event) { 
var permalink = $(this).data("href"); // move it here 
$("#gallery").fadeIn(function() { 
    //var permalink = $(event.target).attr("data-href"); 

Answer 2

問題

• eventは
• event.targetはおそらくあなたが望む要素ではない定義されていません。

ソリューション

は、あなたの代わりにクリックイベントにa.metaリンク上でそれをしたいいけませんか？

$("a.meta").click(function() { 
    var permalink = $(this).attr("data-href"); 

    $('#gallery').append("<div class='slides'></div>") 
    $("#gallery .slides").delay(1000).load(permalink + " img", function() { 

     $("#gallery .slides img").wrap("<div class='slide'></div>"); 

     $(".slide").each(function() { 
      var src = $(this).find("img").attr("src"); 
      $(this).css({ 
       "background": "url(" + src + ")" 
      }); 
      $(this).empty(); 
     }); 

     $('.slides').anyslider(); 

    }); 
});