2

我正忙于一个带有几个按钮和一个弹出窗口的小型 jquery 移动 web 应用程序。按钮有一个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.. ?
});
4

2 回答 2

6

考虑将您的处理程序绑定到标签的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 数据属性的信息

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

于 2013-01-20T19:06:27.583 回答
4

正确答案是这样的：

    $(document).on("click","a",function(event,ui){
       var data_id=$(event.target).attr("data-location");
       ...
     }
于 2014-01-11T22:28:55.697 回答