Grab Data ID Value

Question

I'm trying to get the value of data-id in this a tag to be stored in the var filterValue

<a class="link-item" href="#page" data-id="1">Some Page</a>

By using the script below as I need the value of the data-id ID to be used by the Handlebars Helper

The Javascript is

    var filterValue = $("body").on('click', 'a.link-item', function (e) {
    e.preventDefault();
    $(this).data("id");

    alert("Data ID: " + $(this).data("id"));

    console.log(filterValue);

    Handlebars.registerHelper('filter', function (fValue, options) {
        if (fValue == filterValue) {
            return options.fn(this);
        } else {
            return options.inverse(this);
        }
    });

});

The alert is returning the value of data-id but somehow its not being stored in the var filterValue

I've created a JS bin here http://jsbin.com/fesejo/1/edit?html,js,output

Thanks & Regards

Answer 1

you are doing it wrong, you have to change it to this:

 var filterValue;
   $("body").on('click', 'a.link-item', function (e) {
    e.preventDefault();
    filterValue =$(this).data("id");//<-- store data-id value in variable
    ....................
    ....................
});

or:

   $("body").on('click', 'a.link-item', function (e) {
    e.preventDefault();
    var filterValue =$(this).data("id");//<-- store data-id value in variable
    ....................
    ....................
});

UPDATED JS BIN