Geek asks and answers

JQuery Mobile get button opening Popup

I have a listview, when I click the link in the list, it launches a popup. For simplicity, I skipped the list and start with just one button.

I want to extract the attributes from the button that caused the popup to show, in my example, an attribute named customAttr. Then I want to insert the value in popupBasic.

Here is my very simple jQuery Mobile code example:

<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/

Usually, when I work with jQuery (non-Mobile), I am more involved in the click / open event of pop-ups / dialogs. I would like to be able to read the button that caused the popup, how can I do this?

+5
source share
3 answers

, , . :

$('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/

+6

, .

ListView

click <a> , .

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

, , . data-customattr .

.

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

data-customattr click,

$(this).data('customattr')

, <p> . -

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

, .

, -

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

live fiddle http://jsfiddle.net/gFTzt/5/

,

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

, click customattr.

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

live fiddle http://jsfiddle.net/gFTzt/5/

.attr()

data, . , .

. , .

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

value1, .attr(), .

$(this).attr('customattr')

.

+3

I had a problem getting popups, but I finally realized that the popup div should be inside the page. My popup was a brother on the page where the popup link was, and it didn't show until I moved it to be a relative of the link and the child of the page.

0
source

More articles:


All Articles