Cannot set data-id to HTML element

Question

I'm searching for this sometime. Found this old article and this. But not working for me.

My Problem is : I cannot set incremented data-id to HTML Element via jQuery. I'm able to alert the same, But I failed to set in HTML. There is no change in the element if I inspect.

jQuery

$(document).ready(function() {    
   $("#search").click(function(){      
   var num = $(this).data('id');    
    num++; 
    $("span").text(num);
    $(this).data('id', num);
   });    
 });

I tried this also

$(this).data('id') === num;

Here is a jsFiddle Demo

I'm using v1.9.1 and no error in console. Its great if anyone can find the issue.

Answer 1

All other answers are correct - fixing 'val' to val - that of course solves the NaN issue.

The problem however is:

I cannot set incremented data-id to HTML Element via jQuery. I'm able to alert the same, But I failed to set in HTML. There is no change in the element if I inspect.

jQuery uses internal representation (1) for data. If you want to see data-id in inspector you need to use: $(this).attr('data-id', num);

---

(1) "Internal represenation":

All data is stored inside a property of the jQuery object named cache. Log the contents of $.cache in your console to see all data and events associated with any DOM element.

See: https://stackoverflow.com/a/4385015/775359

Answer 2

The problem is in this line.

$(this).data('id', 'num');

num should be a variable, not a string.

Change it to this and it will work fine:

$(this).data('id', num);

Answer 3

Try this to get:

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

and this to set attribue:

$(this).attr('data-id', num);