Data attribute value is not passed in jquery var

Question

I have the following issue. I'm generating multiple data from db and each item has a "delete" btn which has a "data-entryid" attribute with the entry id number.

I want to pass the data attribute of each item when i click the trash icon but with the current js code i only get the first entry's id.

Here's my html btn code where "entry-num" the entry id generated from db:

<a href="#" id="dlt-btn" data-entryid="{entry-num}" class="btn btn-danger delete">
   <i class="far fa-trash-alt"></i>
</a>

And here's my js code in which i'm trying (for now) to pass the value in console:

$("#dlt-btn").click(function(){
 var entryId = $(this).data("entryid");
 console.log(entryId);
});

`id` attribute should be unique per page. – alex Aug 29 '18 at 16:26 — alex, Aug 29 '18 at 16:26
Oh i see! Thank you for your clarification! – Harrys R. Aug 29 '18 at 16:27 — Harrys R., Aug 29 '18 at 16:27

Mamun · Answer 1 · 2018-08-29T16:39:07.683

3

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Use class instead of id:

$(".delete").click(function(){
  var entryId = $(this).data("entryid");
  console.log(entryId);
});

edited Aug 29 '18 at 16:39

answered Aug 29 '18 at 16:24

Mamun

66,969
9
47
59

Oh! It worked! Any explainations on why this happens when i use id?! (To avoid making the same silly mistake again) – Harrys R. Aug 29 '18 at 16:25
@HarrysR., in a document `id` should be unique. – Mamun Aug 29 '18 at 16:27

score 1 · Answer 2 · answered Aug 29 '18 at 16:28

1

Use Class instead of Id Because its unique or generated id

answered Aug 29 '18 at 16:28

Ahmed Megahd

22
9

score 0 · Answer 3 · answered Aug 29 '18 at 16:35

0

Seeing as the data is being generated after the page has loaded, you should try event delegation. Something like:

$('#someParentElement').on('click', '.deleteButtonClass', function(){
 var entryId = $(this).data("entryid");
 console.log(entryId);
});

answered Aug 29 '18 at 16:35

Gerry Blackmon

335
1
2
9

score 0 · Answer 4 · answered Aug 29 '18 at 17:00

You can use simply like this use class instead id and change accordingly

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".dlt-btn").click(function(){
 var entryId = $(this).data("entryid");
 alert(entryId);
});
});
</script>
</head>
<body>
<a href="#" data-entryid="value" class="btn btn-danger delete dlt-btn">
   <i class="far fa-trash-alt">ddd</i>
</a>
</body>
</html>

score 0 · Answer 5 · answered Aug 29 '18 at 17:06

0

if you do not want to use class and id Attributes.

$("a").on('click',function(){
    var entryId = $(this).data("entryid");
    console.log(entryId);
});

answered Aug 29 '18 at 17:06

Deepak Sharma

91
8

Data attribute value is not passed in jquery var

5 Answers5