How do I get the specific value from data attribute via jQuery -

i have table containing records taken database. have button each record makes dialogue box appear when clicked.

<img src="<?php echo config_item('base_url'); ?>library/images/ui/buttons/delete.png" class="bookmark-delete" data-bookmark="<?php echo $array_bookmarks_for_manage['bookmark_id']; ?>" height="14" width="14" /> 

each button graphic , has data attribute attached containing id of each record.

i'm trying value of data attribute appear in dialogue box.

my code:-

$(document).ready(function() {     $("#dialogue").hide();     $("a.action").attr("href", base_url + 'bookmarks/delete/' + **$('.bookmark-delete').data('bookmark')**);     $('.bookmark-delete').click(function(event) {         $("#dialogue").css( { position:"absolute", top: event.pagey+15, left: event.pagex-315 });         $("#dialogue").show();     });     $('#close').click(function() {         $("#dialogue").hide();     }); }); 

and this:

$(document).ready(function() {     $("#dialogue").hide();     $("a.action").attr("href", base_url + 'bookmarks/delete/' + **$(this).data('bookmark')**);     $('.bookmark-delete').click(function(event) {         $("#dialogue").css( { position:"absolute", top: event.pagey+15, left: event.pagex-315 });         $("#dialogue").show();     });     $('#close').click(function() {         $("#dialogue").hide();     }); }); 

and this:

$(document).ready(function() {     $("#dialogue").hide();     $("a.action").attr("href", base_url + 'bookmarks/delete/' + **$(this).attr('data-bookmark')**);     $('.bookmark-delete').click(function(event) {         $("#dialogue").css( { position:"absolute", top: event.pagey+15, left: event.pagex-315 });         $("#dialogue").show();     });     $('#close').click(function() {         $("#dialogue").hide();     }); }); 

all no joy; every attempt either results in "undefined" or last record id in table.

everything else works except retrieval of value on third line of each example, i've emboldened emphasis.

the dialogue box positioned outside of , after table:

    <div id="dialogue">         <h3>delete bookmark</h3>         <p>do want delete bookmark?</p>         <div class="divider"></div>         <ul class="buttons">             <li><div id="button-link"><a class="button-link action" href="#">delete</a></div></li>             <li><div id="button-link"><a class="button-link" href="#close" id="close">cancel</a></div></li>         </ul>         <div class="cleaner"></div>     </div> 

also, here's js fiddle of have. please aware, reason, code doesn't work @ on js fiddle, though id works here locally.

any ideas?

try

$('.bookmark-delete').click(function(event) { var yourdataatr =         $(this).attr("data-bookmark");     }); 

and whatever yourdataatr value