-1

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.

<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 is a graphic and has a data attribute attached to it containing the ID of each record.

I'm trying to get the value of a data attribute to appear in the 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 also 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 with no joy; every attempt either results in "undefined" or the last record ID in the table.

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

The dialogue box is positioned outside of and after the table:

    <div id="dialogue">
        <h3>Delete Bookmark</h3>
        <p>Do you want to delete this 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 a JS Fiddle of what I have. 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.

Any ideas?

4

3 回答 3

1

尝试 

var bookmarkid = $(this).data('bookmark');    
$("a.action").attr("href", base_url+'bookmarks/delete/'+bookmarkid);

代替 

$("a.action").attr("href", base_url + 'bookmarks/delete/' + $(this).attr('data-bookmark'));
于 2013-05-06T09:19:05.387 回答
1

尝试

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

用你的yourDataAtr价值做任何事

于 2013-05-06T09:20:50.040 回答
0

两个都

var data = $(".bookmark-delete").attr('data-bookmark');

和

var data = $(".bookmark-delete").data('bookmark');

返回所需的值。然后使用 -

 $("a.action").attr("href", base_url + 'bookmarks/delete/' + data);
于 2013-05-06T09:22:39.090 回答