jQuery Mobile 1.3.1 Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open'

问题

I have a simple login dialog which I pop-in on document load:

<div data-role="popup" id="signupPopup" data-theme="a" class="ui-corner-all" data-dismissible="false" data-add-back-btn="true" data-transition="pop">
    <h3 class="centerText">Login</h3>

    <div class="popup">
        <form>              
            <input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
            <input type="text"  name="zip"   id="zip"   class="centerText" placeholder="pass" data-theme="a"/>                  
        </form>
    </div>
</div>

$(document).ready(function(){
    $("#signupPopup").popup('open');
});

This is a jsFiddle of the example. Now, on a normal load the popup pops-up without a problem, and then it updates the url hash to http://myurl.com/#&ui-state=dialog and if I click reload with this hash in the url I get the js error: Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open'.

I tried to replicate the same behavior on http://view.jquerymobile.com/master/demos/widgets/popup/

by adding the has to the link like this:

http://view.jquerymobile.com/master/demos/widgets/popup/#&ui-state=dialog but there I can't replicate the same error. So, am wondering if someone encountered this error and how he/she solved it? Btw, I did check all of the top 20 links from google on this error, but none of them helped, including few from SO. Also, worth noting is that I don't get this error if I use jQuery Mobile 1.2 and jQuery 1.7.1 .

I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1.

回答1:

You may not have the popup HTML inside a "page" elemenet.

<div data-role="page"> <!-- popup inside here --> </div>

I found that when I accidentally put it outside the page that I needed to call .popup() to initialize first, however buttons or other elements inside the popup are never initialized with this approach. The root fix is to put the popup inside the page element.

回答2:

$(document).ready() should not be used in jQuery Mobile. Instead use pageinit

http://jquerymobile.com/demos/1.2.1/docs/api/events.html

$(document).bind('pageinit', function() {
    $("#signupPopup").popup('open');
});

回答3:

Nikola,

try to initialize the popup before calling open method.

    $("#signupPopup").popup();
    $("#signupPopup").popup('open');

来源：https://stackoverflow.com/questions/16131431/jquery-mobile-1-3-1-uncaught-error-cannot-call-methods-on-popup-prior-to-initia

标签

jquery

jquery-mobile