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);

Answer 4

Standard Pure Javascript data-attr

try this

this.dataset['id']=num;

or

this.dataset.id=num;

http://jsfiddle.net/JU4H4/8/

EDIT based on the comments and also why i don't use jaquery

here is a partial function for data-attr taken from jquery's code.(i don't use jquery)

function dataAttr( elem, key, data ) {
        var name;

        // If nothing was found internally, try to fetch any
        // data from the HTML5 data-* attribute
        if ( data === undefined && elem.nodeType === 1 ) {
                name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
                data = elem.getAttribute( name );

                if ( typeof data === "string" ) {
                        try {
                                data = data === "true" ? true :
                                        data === "false" ? false :
                                        data === "null" ? null :
                                        // Only convert to a number if it doesn't change the string
                                        +data + "" === data ? +data :
                                        rbrace.test( data ) ? jQuery.parseJSON( data ) :
                                        data;
                        } catch( e ) {}

                        // Make sure we set the data so it isn't changed later
                        data_user.set( elem, key, data );
                } else {
                        data = undefined;
                }
        }
        return data;
}

Answer 5

Use the variable num, not the string 'num':

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

Updated jsfiddle demo