Question

I’m busy on a little jquery mobile webapp with a couple buttons and a popup. The buttons have a data-id attribute with an ID. When I click a button then a popup will open, but I have no idea how I get the data-id value..

The popup content will be set when the popupbeforeposition event will be called. This content will be retrieved via an ajax call with the ID (from the button; data-id).

I have create a JSFiddle with a simple version of the webapp: http://jsfiddle.net/yW2PZ/1/

<div data-role="page">
    <div data-role="content">
        <div data-role="popup" id="media-edit-file" data-overlay-theme="a">
            Popup
        </div>

        <a data-id="1" href="#media-edit-file" data-role="button" data-transition="flip" data-rel="popup">click me</a>
        <a data-id="2" href="#media-edit-file" data-role="button" data-transition="flip" data-rel="popup">or me</a>
    </div>
</div>


$(document).on('popupbeforeposition', '#media-edit-file', function(event, ui)
{
    // how do I get the data-id value.. ?
});

Answer 1

Consider binding your handler to the click event of the a tags instead. This way, the data-id attribute will be accessible through the $(this) object of the callback function. You can then open the popup programmatically with the popup() method.

For example:

$(document).on('click', 'a', function(event, ui) {
    var data_id = $(this).data('id');
     // ... fetch the popup's content ...
    $('#media-edit-file').popup('open');
});

See jsFiddle demo

---

A little more about accessing HTML5 data-attributes

Note how the data-id attribute is accessed with the data() method as id, since the data- prefix is omitted when HTML5 attributes are automatically added by jQuery to the element’s data() object. For instance, this also means data-rel would also be accessible with data('rel'). For more about the data() method see the jQuery Manual.