How do I prevent jQuery.load() returning an “undefined” url?

Question

I'm currently working on a gallery page in a Wordpress site where clicking on the gallery links would fetch the images from the permalinks via the jQuery load() function.

However, while clicking on all of the gallery links one by one repeatedly, there would be times where the images don't load at all, even when the other attempts would be successful. When I look at the console, I see that somewhere in the jQuery function below might've returned an "undefined" in the url, causing a 404 error.

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();

    });
});

Live demo: trivecs.com/work

Screenshot:

Answer 1

Permalink is undefined because it is in scope of the #gallery fadeIn event, move it outside and you will get no troubles:

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

problems

• event is not defined
• event.target is probably not the element you want.

solution

Dont you want to do it on a a.meta link on click event instead?

$("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();

    });
});