How do I get the specific value from data attribute via jQuery
<p>I have a table containing records taken from a database. I have a button for each record which makes a dialogue box appear when clicked.</p>

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

<p>Each button is a graphic and has a data attribute attached to it containing the ID of each record.</p>

<p>I'm trying to get the value of a data attribute to appear in the dialogue box.</p>

<p>My Code:-</p>

<pre><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();
    });
});
</code></pre>

<p>And this:</p>

<pre><code>$(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();
    });
});
</code></pre>

<p>And also this:</p>

<pre><code>$(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();
    });
});
</code></pre>

<p>All with no joy; every attempt either results in "undefined" or the last record ID in the table.</p>

<p>Everything else works except the retrieval of the value on third line of each example, which I've emboldened for emphasis.</p>

<p>The dialogue box is positioned outside of and after the table:</p>

<pre><code>    &lt;div id="dialogue"&gt;
        &lt;h3&gt;Delete Bookmark&lt;/h3&gt;
        &lt;p&gt;Do you want to delete this Bookmark?&lt;/p&gt;
        &lt;div class="divider"&gt;&lt;/div&gt;
        &lt;ul class="buttons"&gt;
            &lt;li&gt;&lt;div id="button-link"&gt;&lt;a class="button-link action" href="#"&gt;Delete&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div id="button-link"&gt;&lt;a class="button-link" href="#close" id="close"&gt;Cancel&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="cleaner"&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Also, here's a <a href="http://jsfiddle.net/WayneSmallman/jFtEU/" rel="nofollow">JS Fiddle of what I have</a>. Please be aware, that for some reason, the code doesn't work at all on JS Fiddle, even though everything but the ID works here locally.</p>

<p>Any ideas?</p>
