How Do I Get the `data-id` Attribute of a Clicked Element using jQuery?

Get the Data-ID Attribute for jQuery Click Events

When working with the jQuery Quicksand plugin, it's necessary to retrieve the data-id attribute of a clicked element to pass to a webservice. This attribute is crucial for identifying the specific item.

To obtain the data-id attribute using jQuery's .on() method, utilize the following syntax:

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

This command retrieves the value associated with the data-id attribute of the element that triggered the click event.

In the provided example code:

$("#list li").on('click', function() {
  // Retrieve the data-id value
  let dataId = $(this).attr("data-id");
});

Here, dataId will contain the value of the data-id attribute of the clicked list item (

).

If you're using jQuery 1.4.3 or later, you can alternatively employ the .data() method:

$(this).data("id");

This method will return the value of the data-id attribute as a numeric value if it is an integer.

Remember, the attribute's name in data- must be lowercase. For instance, data-id is valid, while data-idNum is invalid.

The above is the detailed content of How Do I Get the `data-id` Attribute of a Clicked Element using jQuery?. For more information, please follow other related articles on the PHP Chinese website!