How to Get a data-id Attribute in jQuery

By the end of this page, you will understand how to read custom data-* attributes in jQuery, when to use .attr() versus .data(), and how to attach click handlers correctly for dynamically updated elements.

Custom data-* attributes let you store extra information directly on HTML elements. In your example, the li element stores a project identifier in data-id:

<li data-id="id-40"></li>

In jQuery, you can read this value in two common ways:

$(this).attr('data-id')
$(this).data('id')

The main issue in the original code is this part:

$(this).attr("#data-id")

That is incorrect because .attr() expects the attribute name only, not a CSS selector. The correct attribute name is data-id, not #data-id.

Why this matters:

• data-* attributes are widely used for IDs, flags, categories, and configuration.

Think of an HTML element as a labeled storage box.

• The element itself is the box.
• Normal attributes like id, class, and href are built-in labels.
• data-* attributes are your own extra sticky notes.

So this element:

<li data-id="id-40"></li>

is like a box with a note that says:

• data-id = id-40

When a user clicks the element, jQuery lets you open the box and read that note.

The two most common ways to read a data-id value in jQuery are:

$(this).attr('data-id')
$(this).data('id')

Basic example

$("#list li").on("click", function () {
  alert($(this).attr("data-id"));
});

This reads the data-id attribute from the clicked li.

Using .data()

$("#list li").on("click", function () {
  alert($(this).data("id"));
});

This also works and is often cleaner when working with attributes.

Consider this code:

$("#list").on("click", "li", function () {
  const projectId = $(this).data("id");
  alert(projectId);
});

And this HTML:

<ul id="list">
  <li data-id="id-40">Project A</li>
</ul>

Here is what happens step by step:

1. jQuery attaches one click listener to #list.
2. You click on the li element.
3. The click event bubbles up to #list.
4. jQuery checks whether the clicked target matches the selector li.
5. Since it does match, the handler runs.
6. Inside the handler, this refers to the clicked li.

data-* attributes are very common in real applications.

Common uses

• Storing a database record ID on a row or card
• Attaching product IDs to "Add to cart" buttons
• Keeping category names for filtering items
• Marking elements with status flags like data-active="true"
• Passing small configuration values from HTML to JavaScript

Example: product card

<button class="add-to-cart" data-product-id="101">Add to cart</button>

$(document).on("click", ".add-to-cart", function () {
  const productId = $(this).data("product-id");
  console.log("Add product", productId);
});

Example: table row actions

<tr =>
  Alice
  View

In real projects, developers usually combine data-* attributes with event delegation and small handler functions.

Common pattern: delegated click handling

$("#list").on("click", "li", function () {
  const projectId = $(this).data("id");
  if (!projectId) return;

  DetailsView.GetProject(projectId, OnComplete, OnTimeOut, OnError);
});

This uses a guard clause:

if (!projectId) return;

That avoids making a bad request if the attribute is missing.

Common pattern: click on child, read from parent

Sometimes the click happens on an inner link or image, but the ID is stored on the parent:

$("#list").on("click", "a.project", function (event) {
  event.();
   projectId = $().().();
   (!projectId) ;

  .(projectId, , , );
});

1. Using #data-id instead of data-id

Broken code:

$(this).attr("#data-id")

Why it is wrong:

• #data-id looks like a CSS selector.
• .attr() expects just the attribute name.

Correct code:

$(this).attr("data-id")

or:

$(this).data("id")

2. Binding directly to elements that get replaced

Broken approach:

$("#list li").on("click", function () {
  alert($(this).data());
});

Reading data-* in jQuery

$(element).attr('data-id')
$(element).data('id')

Correct examples

$(this).attr('data-id')
$(this).data('id')

Incorrect example

$(this).attr('#data-id')

Event binding

Static elements

$('#list li').on('click', function () {
  console.log($(this).data('id'));
});

Dynamic elements

$().(, ,  () {
  .($().());
});

How do I get a data-id attribute in jQuery?

Use either:

$(this).attr('data-id')

or:

$(this).data('id')

Why does $(this).attr('#data-id') return undefined?

Because #data-id is not an attribute name. The # symbol is used in CSS selectors for IDs. The correct attribute name is data-id.

Should I use .attr() or .data() in jQuery?

For data-* attributes, .data() is usually more readable. .attr() is also valid when you want the raw attribute value.

How do I handle clicks on elements added after page load?

Use delegated events:

• HTML data attributes — They are the source of values like data-id.
• jQuery event handling — Needed to respond to clicks with .on().
• Event delegation — Important when elements are sorted, replaced, or added dynamically.
• DOM traversal — Methods like .closest() help find the element that actually stores the data.
• jQuery selectors — Useful for understanding the difference between selectors like #id and attribute names like data-id.
• Preventing default actions — Helpful when clicking links inside interactive elements.