Holy crap, I thought I was going to die. I couldn’t figure out for the life of me how to get the new jQuery mobile popup to work within a jQuery mobile page. The documentation just shows the sample code outside of a page. Outside of a page it works just fine. But as soon as I put the link inside of a page, nothing works. I tried all sort of ways.

E.g. I tried this form from their example

<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all photopopup">
<div style="padding:10px 20px;">
	  <h3>Please sign in</h3>
  <label for="un" class="ui-hidden-accessible">Username:</label>
  <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />

  <label for="pw" class="ui-hidden-accessible">Password:</label>
  <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />

  <button type="submit" data-theme="b">Sign in</button>
</div>
</div>

When I just used

<a data-rel="popup" id="popupClick" href="#popupLogin">Open Popup</a>

It worked fine but as soon as I put that Open Popup link inside of a div with data-role=”page”, I get no error but when I clicked on the link, nothing happens.

<div data-role="page">
<a data-rel="popup" id="popupClick" href="#popupLogin">Open Popup</a>
</div>

I searched all over the internet and I didn’t really find any exact complaints so I kept thinking I must be missing something simple. But this something simple was eluding me until a century later, I finally smacked my forehead. I just needed to put my popup div inside of the page div like:

<div data-role="page" id="home">
	<a data-rel="popup" id="popupClick" href="#popupLogin">Open Popup</a>
		
		
	<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all photopopup">
		<div style="padding:10px 20px;">
		  <h3>Please sign in</h3>
	  <label for="un" class="ui-hidden-accessible">Username:</label>
	  <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />

	  <label for="pw" class="ui-hidden-accessible">Password:</label>
	  <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />

	  <button type="submit" data-theme="b">Sign in</button>
		</div>
	</div>
</div>

I suppose it does make sense. But there was absolutely no helpful error messages to help me think the jQuery mobile way:
DIV = PAGE!!!

But I’m glad I finally figured it out. Very excited about the new popup widget in jQuery mobile.

My example -> http://regretless.com/stuff/jQueryMobile/jQueryMobilePopup.html (booo it doesn’t work right on my nexus 7. comment submitted to jQuery mobile group. WOW they fixed it!!)

While I was messing around, I learned this very useful jQuery mobile trick though. To bind onclick events in jQuery mobile, you may do:

$("#selector").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    //Do important stuff....
    console.log('clicked');
});