Question

我正忙着一个带有几个按钮和一个弹出窗口的小jquery移动webapp。这些按钮具有带有ID的data-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 demo

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

请注意data-id方法如何使用data()方法访问id属性，因为当jQuery自动将HTML5属性添加到元素时，省略了data-前缀data()对象。例如，这也意味着data-rel也可以通过data('rel')访问。有关data()方法的详情，请参阅jQuery Manual。

Answer 2

正确的答案是：

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

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

2 个答案: