CODEWITHSUNDEEP
javascriptjquery
TBolton
TBolton

Reputation: 131

Get dataset item from html <a> element using jquery

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

Upvotes: 0

Views: 112

Answers (2)

mplungjan
mplungjan

Reputation: 177786

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>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

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>

Upvotes: 0

Related Questions