javascript - how to access an element's data inside its own event handler using jQuery? -

javascript - how to access an element's data inside its own event handler using jQuery? -

i want retrieve data attribute of button within it's own event handler. have tried next jquery code html @ end. button doesn't seem respond expected:

$('btn.btn-add-layer').on('click', function() { var layertype = $(this).data('layertype'); alert('type : ' + layertype); });

can please help explain how prepare above button can tell data?

thanks

html:

<button data-layertype="base" class="btn btn-primary btn-xs btn-add-layer">ok</button>

-- edit --

thanks have helped. suspected , pointed out in 2 answers, it's typo. thinking button.btn-... wrote btn.btn-....

you must select button button.btn-add-layer code must like:

$('button.btn-add-layer').on('click', function() { var layertype = $(this).data('layertype'); alert('type : ' + layertype); });

more jquery button selector here

javascript jquery html