Getting a data attribute with jQuery?

Question

I'm trying to get the data-shareurl from the link below for use in jQuery but for some reason when I put the variable into an alert it is always undefined. Can anyone tell me what I've got wrong? Thanks. I've made a fiddle here

Html

<a title="" class="fancybox" data-shareurl="www.google.com" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_b.jpg" title="" /></a>

jQuery

 var shareurl = $(this).attr('data-shareurl'); //Get this url
 $(".fancybox").fancybox({

   beforeShow: function() {
     this.title = '<div class="addthis addthis_toolbox addthis_default_style "><a href="' + this.href + '" addthis:url="' + this.href + '" addthis:title="' + this.title + '" class="addthis_button_preferred_1"></a></div>';

     alert(shareurl); //see the variable


   },

   afterShow: function() {
     addthis.toolbox(
       $(".addthis").get()
     );
   },
   helpers: {
     title: {
       type: 'inside'
     }
   }

 });

Shiladitya · Accepted Answer · 2017-12-09 09:16:50Z

1

Here you go with a solution

$('a').click(function(){
  console.log($(this).data('shareurl'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="" class="fancybox" data-shareurl="www.google.com" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_b.jpg" title="" /></a>

Hope this will help you.

answered Dec 9, 2017 at 9:16

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

Comments

Eddie · Accepted Answer · 2017-12-09 08:58:59Z

0

You are using this as a selector. I assume that this code is outside the function $('.fancybox')...

Why not use the id or class as a selector.

var shareurl = $('.fancybox').attr('data-shareurl'); //Get this url

answered Dec 9, 2017 at 8:58

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Getting a data attribute with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related