jQuery加載返回「undefined」url

Question

我目前正在一個Wordpress網站的畫廊頁面上點擊畫廊鏈接，通過jQuery load()函數從固定鏈接中獲取圖片。

然而，雖然反覆點擊所有圖庫鏈接，但仍會有圖像無法加載的時間，即使其他嘗試都會成功。當我查看控制檯時，發現下面的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可能不是你想要的元素。

解決方案

不要你想這樣做的click事件，而不是一個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(); 

    }); 
});