When you have two pages with popups things seem to work strangely.
I created this simple example to demonstrate what I am seeing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="libs/jquery.mobile.paramsHandler-1.4.2.js"></script>
<script src="clickdemo.js"></script>
<style>
.thumbnail
{
float: left;
width: 80px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
text-align:center;
}
.thumbnail img
{
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="main" class="ui-content">
<a href="#workingPage" class="ui-btn">Working Page</a>
<a href="#brokenPage" class="ui-btn">Broken Page</a>
</div>
</div>
<div data-role="page" id="workingPage">
<div data-role="popup" id="workingImagePopup" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<img id="WorkingPopUpPhoto" class="PopPhoto" src="" alt="">
</div>
<div data-role="main" class="ui-content">
<div class="thumbcontainer">
<div class="thumbnail">
<img src="http://www.funnypica.com/wp-content/uploads/2012/05/Funny-UglyMan.jpg" alt="" ><br>
</div>
<div class="thumbnail">
<img src="http://www.funnypica.com/wp-content/uploads/2012/05/Crazy-Face-570x403.jpg" alt="" ><br>
</div>
</div>
</div>
</div>
<div data-role="page" id="brokenPage">
<div data-role="popup" id="brokenImagePopup" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<img id="brokenPopUpPhoto" class="PopPhoto" src="" alt="">
</div>
<div data-role="main" class="ui-content">
<div class="thumbcontainer">
<div class="thumbnail">
<img src="http://www.funnypica.com/wp-content/uploads/2012/05/Funny-UglyMan.jpg" alt="" ><br>
</div>
<div class="thumbnail">
<img src="http://www.funnypica.com/wp-content/uploads/2012/05/Crazy-Face-570x403.jpg" alt="" ><br>
</div>
</div>
</div>
</div>
</body>
</html>
and I back that code up with this JS
$(document).on("pagecreate", "#workingPage", function () {
$(".thumbnail img").click(function (e) {
alert("clicked");
var thumbnailPath = $(this).attr("src");
$('#WorkingPopUpPhoto').attr("src",thumbnailPath); //set the image source of the popup
$('#workingImagePopup').popup('open'); //open the popup
});
});
$(document).on("pagecreate", "#brokenPage", function () {
$(".thumbnail img").click(function (e) {
alert("clicked");
var thumbnailPath = $(this).attr("src");
$('#brokenPopUpPhoto').attr("src",thumbnailPath); //set the image source of the popup
$('#brokenImagePopup').popup('open'); //open the popup
});
});
Since both pages are very similar (cut and pasted with only the ID's changed), I expected them to work the same. If you click on an image, you will see an alert followed by the popup image. both pages are expected to be the same. Click an image, see an alert, then a popup.
Here is what I am experiencing.
I visit the working page (start from home and navigate to "working page"), everything works as expected. CLicking on a thumbnail brings up an alert and a popup image.
I then click back in the browser which brings me to the home page, I click on "broken page" (a duplicate of the "working page") and the behavior is different. When an image is clicked, first you see two alerts (WHY?) then no popup image is displayed.
I I reload and reverse the order (ie:start with the "broken page") the same pattern appears, the broken page works, and the working page is now broken (hinting that it's not the markup or the JS)
Am I doing something wrong?
you are registering the pageCreate Event on document. This would cause the first routine to be called when the first page is created and then eventually both to be called when the second page is created.
Maybe you want to try doing this:
I usually do the $(document).on(... when im corresponding to generic DOM elements -
Also put a breakpoint into each handler callback to verify this :)
I hope this helped in some way ;)