Get dataset item from html element using jquery

Question

I have an element within a table in html:

<td><a id="href0" href="#" data-productid="0">Product 1</a></td>

and i need to get the value of the "data-productid" attribute

at the moment i have this code:

$(document).ready(function(){
  $('#href0').click(function(event) {
    event.preventDefault()
    console.log(this.dataset.productid)
    return false;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>

and nothing is being printed in the console.

I am using handlebars

Well actually 0 is being printed in the console here in Chrome so you likely forgot to load jQuery. there will be console errors too — mplungjan, May 15 '19 at 05:19
jQuery is definitely loaded as i use it elsewhere for an AJAX query, even when using 'console.log($(this).attr("data-productid"));' nothing is printed in console — TBolton, May 15 '19 at 05:31
Duplicate of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — mplungjan, May 15 '19 at 07:52

mplungjan · Accepted Answer · 2019-05-15T07:50:11.897

1

We managed to establish you are using Handlebars templating

What MIGHT then be the case is your links are inserted dynamically when you compile the handlebars.

If that is the case you need to delegate and then this question is a duplicate of Event binding on dynamically created elements?

$(document).ready(function(){
  // document or the nearest STATIC container
  $(document).on('click','[data-productid]',function(event) {
    event.preventDefault()
    console.log(this.dataset.productid)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
<td><a id="href0" href="#" data-productid="1">Product 2</a></td>

edited May 15 '19 at 07:50

answered May 15 '19 at 05:36

mplungjan

169,008
28
173
236

This does not work and i have manually checked all my IDs, is there more code that i should provide? – TBolton May 15 '19 at 05:41
Yeah. If there are no errors at all then there is some conflicts perhaps with multiple jqueries. If you are desperate- my contact details are in my profile – mplungjan May 15 '19 at 05:46
@TBolton Please see update. I think you need to delegate – mplungjan May 15 '19 at 07:44

gavgrif · Answer 2 · 2019-05-15T07:07:36.770

You dont need to the a in the td at all (or even the id on the a or the td) - simply apply the click handler to the td and have the data attribute on that so that when it is clicked - the console will log the data attribute.

$(document).ready(function(){
  $('td').click(function() {
    let id = $(this).attr('data-productid');
    console.log('The product id is ' +id)
  })
});

table {
  border-collapse: collapse
}


td {
  border:solid 1px #d4d4d4;
  padding: 10px 20px;
  border-collapse: collapse
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
   <td data-productid="1">Product 1</td>
   <td data-productid="2">Product 2</td>
  </tr>
  <tr>
   <td  data-productid="3">Product 3</td>
   <td  data-productid="4">Product 4</td>
  </tr>
</table>

If you absolutely must have the a - then its the same as above - just applied to the different element

$(document).ready(function(){
  
  $('a').click(function(event) {
    event.preventDefault();
    let id = $(this).attr('data-productid');
    console.log('The product id is ' +id)
  })
});

table {
  border-collapse: collapse
}


td {
  border:solid 1px #d4d4d4;
  padding: 10px 20px;
  border-collapse: collapse
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
   <td><a href="#" data-productid="1">Product 1</a></td>
    <td><a href="#" data-productid="2">Product 2</a></td>
  </tr>
  <tr>
   <td><a href="#" data-productid="3">Product 3</a></td>
    <td><a href="#" data-productid="4">Product 4</a></td>
  </tr>
</table>

This is not answering the question in any shape or form. It is perfectly fine to have event handler on the link. In this case it was a simple case of delegation — mplungjan, May 15 '19 at 07:54

Get dataset item from html element using jquery

2 Answers2