Question

I am totally shocked when I found that jquery can get value from any randomly defined attribute.

HTML

<a postid='10' class='delete_post'>Delete</a>

JS

$('body').on('click', '.delete_post', function() {
    var id = $(this).attr('postid');
    delete_post(id); //$.post request for deleting post
});

I made fiddle here for testing this.

My question here is => Is it advisable to use such randomly defined attributes to get value?

Generally I get value using below code.

HTML

<div class='delete_post'>
    <a>Delete</a>
    <input type='hidden' class='id' value='10' />
</div>

JS

$('.delete_post').on('click', 'a', function() {
    var id = $(this).parent().find('.id').val();
    delete_post(id); //$.post request for deleting post
});

(I tested this successfully in chrome, firefox and internet explorer.)

Answer 1

Although this will generally work, it is not advisable to use proprietary/user-defined attributes. These will not validate and there is the possibility of you incorrectly using a real attribute. Your code is also not future-proof in that you may define an attribute that is not used now, but could be used later.

Instead, you should use data- attributes / .data:

<input data-postid=10 class=delete_post>

var postID = $(this).data('postid');

Spec: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes