Jquery Mobile popup triggering by itself - jquery-mobile

Question

I have a popup set up on the index.html as follows:
<!-- Choice Popup -->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog-screen"></div>
<div data-role="popup" class="ui-popup-container ui-overlay-a" data-transition="pop" id="choicePopup">
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="window" data-arrow="true" data-arrow-sides="t,b,l,r">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title" role="heading" aria-level="1">Your decision has been made:</h1>
<h2 align="center" id="choice-p"></h2>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Thanks</span>
</span>
</a>
<a href="#" onclick="eatsome('Food'); return false;" data-role="button" data-inline="true" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Again!</span>
</span>
</a>
</div>
</div>
The problem is, I don't know why its booting on loading, some attribute is triggering it, can anyone find the issue? Thank you

Answer 1

There are several issues with your markup and code:
First of all your markup for the popup looks already jQM-enhanced like being copied from the browser's developer view. Therefore make it normal first. It might look like
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1></h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Your decision has been made:</h3>
<a id="btnThanks" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Thanks</a>
<a id="btnAgain" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Again!</a>
</div>
</div>
Second a popup markup should reside inside the same page as the link that opens it.
<div data-role="page" id="main">
...
<div data-role="popup" id="choicePopup">
...
</div>
</div>
Third use proper jQM events to place your code that manipulates the content.
Forth Stop using onclick and other on* event attributes with jQM. Once again use proper jQM or jQuery events.
So instead of
<a href="#" onclick="eatsome('Food'); return false;" ... >Again!</a>
use
<a id="#btnAgain" href="#" ... >Again!</a>
$("#btnAgain").click(function(){
eatsome('Food');
return false;
});
Fifth After injecting html you need to call trigger('create') on a parent element to let jQM enhance and style the markup that you injected.
var content = '<form>;
...
content += '</form>;
$("div.settings-content").html(content).trigger("create");
And here is working jsFiddle based on your markup. As you can see the popup doesn't pop up on its own. There are two buttons that show how to open the popup declaratively and programmatically. And content for settings page is injected and styled properly.