从触发另一个元素事件的单击元素中检索数据属性

Question

我正忙着一个带有几个按钮和一个弹出窗口的小jquery移动webapp.按钮具有data-id带ID 的属性.当我点击一个按钮然后会弹出一个弹出窗口,但我不知道我是如何得到这个data-id值的.

popupbeforeposition将在调用事件时设置弹出内容.此内容将通过带有ID的ajax调用(来自按钮; data-id)进行检索.

我用一个简单版本的webapp创建了一个JSFiddle: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

请考虑将处理程序绑定到标记click事件a.这样,data-id可以通过$(this)回调函数的对象访问该属性.然后,您可以使用该popup()方法以编程方式打开弹出窗口.

例如:

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

请参阅jsFiddle演示

关于访问HTML5数据属性的更多信息

注意如何data-id使用data()方法访问属性id,因为data-当jQuery自动将HTML5属性添加到元素的data()对象时,省略了前缀.例如,这也意味着data-rel也可以访问data('rel').有关该data()方法的更多信息,请参阅jQuery手册.