Question

I have links like this:

<li><a href="#" data-value="Codes">Get codes</a></li>
<li><a href="#" data-value="Product">Get products</a></li>

How can I make it so that when I click on the link then a function gets called passing the value that’s contained in data-value?

function refreshGrid(value) { }

Answer 1

Try the following:

$('li > a[href="#"][data-value]').click(function (e) { // On click of all anchors with a data-value attribute and a href of # that are immediate children of li elements (nb this selector can be modifed to suit your needs)
  e.preventDefault(); // prevent the default (navigate to href)
  refreshGrid($(this).data('value')); // call your refreshGrid function with the value contained in the 'data-value' attribute
});