5

我有一个列表视图，当我单击列表视图中的链接时，它会启动一个弹出窗口。为简化起见，我省略了列表视图，并从一个按钮开始。

我想从导致弹出窗口显示的按钮中检索属性，在我的示例中，属性名为customAttr. 然后我想将值插入到popupBasic.

这是我非常基本的示例 jQuery Mobile 代码：

<a href="#popupBasic" data-rel="popup" customAttr="value">Basic Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>

jsFiddle：http: //jsfiddle.net/cPRCU/2/

通常，当我使用 jQuery（非移动设备）时，我会更多地参与单击事件/打开弹出窗口/对话框。我希望能够阅读导致弹出窗口显示的按钮，我该怎么做？

4

3 回答 3

6

向按钮添加点击处理程序似乎有效。在此处理程序中，在弹出窗口显示之前对其进行修改：

$('a[data-rel="popup"]').click(function () {
    var link = $(this);
    var data = link.attr('customAttr')
    var popup = $(link.attr('href')); // assume href attr has form "#id"
    popup.append(($('<p />').text(data)));
});

这是一个通用处理程序，它支持具有多个按钮/弹出窗口的页面。如果某些按钮不应该有这种行为，我会为所需的按钮添加一个类，并使a[data-rel="popup"]选择器更具体。

见小提琴：http: //jsfiddle.net/cPRCU/3/

于 2013-03-29T20:31:20.423 回答
3

我是在列表视图本身上做的，因为它对你更有用。

对于列表视图

您必须<a>首先在列表视图中为标签注册一个点击事件，如下所示。

$('#mylist a').bind('click', function(event){
});

同时，确保将数据存储在锚标记内，如下所示。 data-customattr这里的一切都很小。

例如

<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>

现在您可以读取data-customattr点击事件内部的值，如下所示

$(this).data('customattr')

现在我假设您<p>在弹出窗口中有一个标签的 id。如下所示

  <p id="mypopup">This is a completely basic popup, no options set.</p>

使用 ID，您可以替换弹出窗口的内容。

最后把所有的东西放在一起，如下所示

$('#mylist a').bind('click', function(event){
    console.log($(this).text());
   $('#mypopup').html($(this).data('customattr'));
});

查看此live fiddle工作示例http://jsfiddle.net/gFTzt/5/

对于一个按钮

如果您坚持使用按钮的示例，请声明一个 ID 如下的按钮

<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>

如上所述，注册一个点击事件并读取该customattr值。

 $('#mybutton').bind('click',function(){
        alert($(this).data('customattr'));
 });

查看live fiddle按钮和列表视图的此示例http://jsfiddle.net/gFTzt/5/

使用 .attr()

在这里，我使用data来获取值。如果没有 data 属性，我们可以直接从锚标签中获取值，如下所示。

例如，我们有一个锚标记，如下所示。

<a href="#popupBasic" customattr="value1">Basic Popup 1</a>

我们可以阅读value1使用.attr()如下。

$(this).attr('customattr')

Here is a Live fiddle example.

于 2013-03-29T20:31:36.627 回答
0

I was having a problem getting popups to work but I finally realized that the popup div needs to be inside the page. My popup was a sibling to the page where the popup link was and was not showing up until I moved it in to be a sibling of the link and child of the page.

于 2014-01-28T21:03:40.327 回答