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

Question

我正忙着做一个小的jquery移动web应用，有几个按钮和一个弹出窗口。按钮有一个带有ID的data-id属性。当我点击一个按钮，然后弹出窗口将打开，但我不知道我如何得到data-id值..

当popupbeforeposition事件被调用时，将设置弹出内容。该内容将通过带有ID(来自按钮;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

考虑将处理程序绑定到a标记的click事件。这样，就可以通过回调函数的$(this)对象访问data-id属性。然后，您可以使用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 demo

---

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

注意data-id属性是如何被data()方法作为id访问的，因为当HTML5属性被jQuery自动添加到元素的data()对象时，data-前缀被省略了。例如，这也意味着data-rel也可以通过data('rel')访问。有关data()方法的更多信息，请参见《jQuery手册》

Answer 2

正确答案是:

    $(document).on("click","a",function(event,ui){
       var data_id=$(event.target).attr("data-location");
       ...
     }