JQuery function not getting data attribute

Question

I am using an external JQuery library called 3D RealFlipbook (from Codecanyon). It works great, but I'm trying now to generalize my solution to get the PDF url from using the 'data-pdf' attribute which is dynamic. However, it seems like the function cannot get the attribute when I click on my button. What am I doing wrong here?

Here's the code:

<button data-pdf=http://example.com/myPdfUrl.pdf" class="flipper">VIEW MAGAZINE</button>



$(".flipper").flipBook({
        pdfUrl: $(this).attr("data-pdf"),
        lightBox:true
    });

If I do the following, the attribute shows up properly:

$(".flipper").click({
            alert($(this).attr("data-pdf"))
        });

In $(".flipper").flipBook({ pdfUrl: $(this).attr (with no other provided details) - this will be window — fdomn-m
– fdomn-m, Commented Jul 3, 2021 at 12:36
What doesn't work? I've just commented on what the issue is, the answers are for answers. — fdomn-m
– fdomn-m, Commented Jul 3, 2021 at 15:15

charlietfl · Accepted Answer · 2021-07-03 12:43:25Z

1

When you need element specific data to pass to a plugin a simple approach is initialize inside an each() loop where each individual element instance is exposed.

$(".flipper").each(function(){
    $(this).flipBook({
        pdfUrl: $(this).attr("data-pdf"),
        lightBox:true
    });
});

answered Jul 3, 2021 at 12:43

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nTuply Over a year ago

Brilliant, this works perfectly. Thanks! Question is, why does this one work and the other one doesn't?

charlietfl Over a year ago

Because the context of this in your approach is window or document whereas within each jQuery sets context as individual element

Collectives™ on Stack Overflow

JQuery function not getting data attribute

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related