I have:

<div data-role="page" class="type-interior">
    <div data-role="content" class="ui-body">
        <a href="#transitionExample" data-role="button" data-rel="popup">
          Pop Up
        </a>
        <div data-role="popup" id="transitionExample">This is a POP UP.</div>
        <a href=# onClick="$('transitionExample').popup('open')"
        data-rel="popup">OpenPopUp</a>
    </div>
</div>

If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.

What is happening? I use, JqueryMobile 1.2.0 and JQuery 1.8.2.

I have:

<div data-role="page" class="type-interior">
    <div data-role="content" class="ui-body">
        <a href="#transitionExample" data-role="button" data-rel="popup">
          Pop Up
        </a>
        <div data-role="popup" id="transitionExample">This is a POP UP.</div>
        <a href=# onClick="$('transitionExample').popup('open')"
        data-rel="popup">OpenPopUp</a>
    </div>
</div>

If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.

What is happening? I use, JqueryMobile 1.2.0 and JQuery 1.8.2.

• javascript
• jquery
• cordova
• jquery-mobile

Share Improve this question Follow edited Jan 21, 2013 at 11:42 JohnJohnGa 15.7k2020 gold badges6464 silver badges8787 bronze badges asked Jan 21, 2013 at 11:32 ManuParraManuParra 1,53166 gold badges1818 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$('transitionExample').popup('open')

should be

$('#transitionExample').popup('open')

for more info see: http://api.jquery./id-selector/

then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.

 <a href='#' id='myButton' data-rel="popup">OpenPopUp</a>

and between your <script></script> tags

$(function () {
    $("#myButton").click(function () {
        $('#transitionExample').popup('open');
    });
});

I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded

$('#popupid').popup(open)

NO QUOTES! No one plained - Chrome did not throw up an error but the popup call did nothing.

Hopefully, this will help someone else one day.