-2

I need to write some events where application contains series of anchor link with different data in data-attribute. i have wire an event (click may be) which can pull data-attribute value data-product-d and data-product-name for clicked anchor

My HTML looks like

<div class="product-availibility">
  <p>Available from Etsy starting at <strong>$26</strong>
  </p>
  <a class="button lnk_tracking" href="https://www.etsy.com/listing/269790426/name-necklace-gold-name-necklace-gold" target="_blank" rel="nofollow" data-product-id="Non-Amazon" data-product-name="Name Necklace">See Now</a>
</div>

There are almost 10 divs with same class. On click on anchor, need to pull data-attribute

bruno.almeida
  • 2,746
  • 1
  • 24
  • 32
jvm
  • 1,662
  • 8
  • 27
  • 46
  • 3
    Ok, so where are you stuck? Are you just looking for the `.data()` function in jQuery? – David Jan 25 '18 at 17:58
  • $('.product-availibility a').on('click', () => { alert(this.tagName); alert($(this).closest('button lnk_tracking').data('data-product-id')); }); gives undefined – jvm Jan 25 '18 at 18:00
  • 1
    @jvm: Why are you using `closest` there? You are already hooking the click event on the `a` tag itself. `$(this).data('data-product-id')` should work. – Matt Burland Jan 25 '18 at 18:02
  • $(this).data('data-product-id') comes undefined – jvm Jan 25 '18 at 18:05
  • 2
    @jvm: `$('.product-availibility a').on('click', function () {console.log($(this).data('product-id'));});` (1) Not sure what you were trying to do with `.closest()` there. (2) Don't include the prefix `'data-'` in the data keys, just use the key itself. – David Jan 25 '18 at 18:05
  • console.log($(this).data('product-id')); also comes as undefined – jvm Jan 25 '18 at 18:09
  • @jvm, please update your question with a complete example. – bruno.almeida Jan 25 '18 at 18:11
  • 1
    I think () => is causing issue. I replaced with function() and it works – jvm Jan 25 '18 at 18:12
  • @jvm: Yes, the binding of `this` is different when using the arrow syntax. – Matt Burland Jan 25 '18 at 18:12
  • See, for example: https://stackoverflow.com/questions/28371982/what-does-this-refer-to-in-arrow-functions-in-es6 – Matt Burland Jan 25 '18 at 18:13

2 Answers2

1

Based on the comments on the question above...

$('.product-availibility a').on('click', () => {
  alert(this.tagName);
  alert($(this).closest('button lnk_tracking').data('data-product-id'));
});
  1. You don't need (or want) to use .closest() here. The <a> is the element you're looking for, and this event already targets that.
  2. Even if you were using .closest(), the selector you're passing to it is looking for the structure <button><lnk_tracking /></button>, which of course doesn't exist. (It looks like you meant to use class selectors, which are prefixed with a . like in your first selector.)
  3. When using the .data() function, don't include the '-data' prefix for the key. Just use the key itself.

It sounds like you're looking for this:

$('.product-availibility a').on('click', function () {
  console.log($(this).data('product-id'));
});

Example.

Note that I also changed the () => structure to function (). I'm not sure if this was breaking solely in jsFiddle, or if this is necessary. To be honest, I haven't actually used the () => syntax before. But the function syntax is working.

David
  • 208,112
  • 36
  • 198
  • 279
  • 1
    The reason for the `()=>` vs `function()` is that in the arrow function, `this` is bound to the scope of the outer function. So, it's probably `window` in this case. – Matt Burland Jan 25 '18 at 18:16
0
    $('.product-availibility a').on('click', function() {
            console.log($(this).data('product-id'));
    });
Alexan
  • 8,165
  • 14
  • 74
  • 101
jvm
  • 1,662
  • 8
  • 27
  • 46
  • 1
    While this code-only answer may answer the question, please add an explanation of why it does so. This will help future users evaluate the answer for their situation. – Tom Brunberg Jan 25 '18 at 19:24