I have a listview, when I click a link in the listview it launches a popup. For simplification purposes I have omitted the listview and am starting with just a single button.
我有一个listview，当我点击listview中的链接时它会弹出。为了简化，我省略了listview，只从一个按钮开始。
I want to retrieve attributes from the button that caused the popup to show, in my example the attribute named customAttr. I then want to insert the value into popupBasic.
我想从导致弹出窗口显示的按钮中检索属性，在我的例子中名为customAttr。然后我想要将值插入到popupBasic中。
Here is my very basic sample jQuery Mobile code:
以下是我最基本的jQuery移动代码示例:
<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/
jsFiddle:http://jsfiddle.net/cPRCU/2/
Normally when I work with jQuery (non-Mobile) I am more involved with the click event/opening of popup's/dialogs. I would like to be able to read the button that caused the popup to show, how can I do this?
通常，当我使用jQuery(非移动)时，我更关注弹出窗口/对话框的单击事件/打开。我希望能够读取弹出窗口显示的按钮，我如何做到这一点?
3 个解决方案
#1
6
Adding a click handler to the button seems to work. In this handler, modify the popup before it gets shown:
向按钮添加单击处理程序似乎是可行的。在这个处理器中，在弹出窗口显示之前修改它:
$('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)));
});
This is a generic handler which supports a page with multiple buttons/popups. If some buttons should not have this behaviour, I would add a class to the desired button, and make the a[data-rel="popup"] selector more specific.
这是一个通用处理程序，它支持具有多个按钮/弹出窗口的页面。如果某些按钮不应该具有这种行为，我将向所需的按钮添加一个类，并使a[data-rel="popup"]选择器更具体。
See fiddle: http://jsfiddle.net/cPRCU/3/
看到小提琴:http://jsfiddle.net/cPRCU/3/
#2
3
I did it on a listview itself as it would be more useful to you.
我是在listview上做的因为它对你更有用。
For a ListView
You have to register a click event for the <a> tags in your listview as below first.
您必须首先为listview中的标记注册一个单击事件。
$('#mylist a').bind('click', function(event){
});
meanwhile, make sure to store the data inside the anchor tag as below. data-customattr everything is small here.
同时，请确保将数据存储在锚标记中，如下所示。这里所有的数据都很小。
e.g.
如。
<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>
Now you can read the value of data-customattr inside the click event as below
现在可以在单击事件中读取data-customattr的值，如下所示
$(this).data('customattr')
Now I assume that you have a id for the <p> tag inside the popup. Something as below
现在我假设在弹出窗口中有一个
标记的id。的东西如下
<p id="mypopup">This is a completely basic popup, no options set.</p>
using the ID you can replace the popup's content.
使用ID可以替换弹出窗口的内容。
finally putting all together something like below
最后把所有的东西放在一起。
$('#mylist a').bind('click', function(event){
console.log($(this).text());
$('#mypopup').html($(this).data('customattr'));
});
Checkout this live fiddle for the working example http://jsfiddle.net/gFTzt/5/
为工作示例http://jsfiddle.net/gFTzt/5/签出此活动小提琴
For a button
If you insist on a example using button then declare a button with an ID as below
如果您坚持使用按钮的示例，那么声明一个ID如下所示的按钮
<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>
As mentioned above register a click event and read the customattr value.
如上所述，注册一个单击事件并读取customattr值。
$('#mybutton').bind('click',function(){
alert($(this).data('customattr'));
});
Check out this live fiddle example for both button and listview http://jsfiddle.net/gFTzt/5/
请查看按钮和listview的live fiddle示例http://jsfiddle.net/gFTzt/5/
using .attr()
Here I've used the data to get the value. without data attribute we can directly get the value from the anchor tag as below.
这里我用数据来获取值。没有数据属性，我们可以直接从下面的锚标记获取值。
E.g. we have a anchor tag as below.
我们有如下的锚标签。
<a href="#popupBasic" customattr="value1">Basic Popup 1</a>
we can read the value1 using the .attr() as below.
我们可以使用.attr()读取value1，如下所示。
$(this).attr('customattr')
Here is a Live fiddle example.
这是一个活生生的例子。
#3
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.
我有一个问题，让弹出窗口工作，但我最终意识到弹出div需要在页面内。我的弹出框是弹出框链接所在页面的兄弟级，直到我将它移动到链接的兄弟级和页面的子级时才出现。
#1
6
Adding a click handler to the button seems to work. In this handler, modify the popup before it gets shown:
向按钮添加单击处理程序似乎是可行的。在这个处理器中，在弹出窗口显示之前修改它:
$('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)));
});
This is a generic handler which supports a page with multiple buttons/popups. If some buttons should not have this behaviour, I would add a class to the desired button, and make the a[data-rel="popup"] selector more specific.
这是一个通用处理程序，它支持具有多个按钮/弹出窗口的页面。如果某些按钮不应该具有这种行为，我将向所需的按钮添加一个类，并使a[data-rel="popup"]选择器更具体。
See fiddle: http://jsfiddle.net/cPRCU/3/
看到小提琴:http://jsfiddle.net/cPRCU/3/
#2
3
I did it on a listview itself as it would be more useful to you.
我是在listview上做的因为它对你更有用。
For a ListView
You have to register a click event for the <a> tags in your listview as below first.
您必须首先为listview中的标记注册一个单击事件。
$('#mylist a').bind('click', function(event){
});
meanwhile, make sure to store the data inside the anchor tag as below. data-customattr everything is small here.
同时，请确保将数据存储在锚标记中，如下所示。这里所有的数据都很小。
e.g.
如。
<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>
Now you can read the value of data-customattr inside the click event as below
现在可以在单击事件中读取data-customattr的值，如下所示
$(this).data('customattr')
Now I assume that you have a id for the <p> tag inside the popup. Something as below
现在我假设在弹出窗口中有一个
标记的id。的东西如下
<p id="mypopup">This is a completely basic popup, no options set.</p>
using the ID you can replace the popup's content.
使用ID可以替换弹出窗口的内容。
finally putting all together something like below
最后把所有的东西放在一起。
$('#mylist a').bind('click', function(event){
console.log($(this).text());
$('#mypopup').html($(this).data('customattr'));
});
Checkout this live fiddle for the working example http://jsfiddle.net/gFTzt/5/
为工作示例http://jsfiddle.net/gFTzt/5/签出此活动小提琴
For a button
If you insist on a example using button then declare a button with an ID as below
如果您坚持使用按钮的示例，那么声明一个ID如下所示的按钮
<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>
As mentioned above register a click event and read the customattr value.
如上所述，注册一个单击事件并读取customattr值。
$('#mybutton').bind('click',function(){
alert($(this).data('customattr'));
});
Check out this live fiddle example for both button and listview http://jsfiddle.net/gFTzt/5/
请查看按钮和listview的live fiddle示例http://jsfiddle.net/gFTzt/5/
using .attr()
Here I've used the data to get the value. without data attribute we can directly get the value from the anchor tag as below.
这里我用数据来获取值。没有数据属性，我们可以直接从下面的锚标记获取值。
E.g. we have a anchor tag as below.
我们有如下的锚标签。
<a href="#popupBasic" customattr="value1">Basic Popup 1</a>
we can read the value1 using the .attr() as below.
我们可以使用.attr()读取value1，如下所示。
$(this).attr('customattr')
Here is a Live fiddle example.
这是一个活生生的例子。
#3
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.
我有一个问题，让弹出窗口工作，但我最终意识到弹出div需要在页面内。我的弹出框是弹出框链接所在页面的兄弟级，直到我将它移动到链接的兄弟级和页面的子级时才出现。