How can I get the data-id attribute?

Question

I'm using the jQuery Quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.

How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.

$("#list li").on('click', function() {   //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);   alert($(this).attr("#data-id")); });

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  <ul id="list" class="grid">   <li data-id="id-40" class="win">     <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">       <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />     </a>   </li> </ul>

Answer 1

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123" 

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id") // will return the number 123 

and the part after data- must be lowercase, e.g. data-idNum will not work, but data-idnum will.

Answer 2

If we want to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

Through JavaScript

<div id='strawberry-plant' data-fruit='12'></div>  <script> // 'Getting' data-attributes using getAttribute var plant = document.getElementById('strawberry-plant'); var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'  // 'Setting' data-attributes using setAttribute plant.setAttribute('data-fruit','7'); // Pesky birds </script> 

Through jQuery

// Fetching data var fruitCount = $(this).data('fruit'); OR  // If you updated the value, you will need to use below code to fetch new value  // otherwise above gives the old value which is intially set. // And also above does not work in ***Firefox***, so use below code to fetch value var fruitCount = $(this).attr('data-fruit');  // Assigning data $(this).attr('data-fruit','7'); 

Read this documentation