JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function(){
$(document).on('pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
$('#btnTest').on('click', function(){
alert(1);
});
/*solution: off click event handler first
$('#btnTest').off('click').on('click', function(){
alert(1);
});*/
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p><button id="btnTest">button test1</button></p>
<a href="#page2" >go to page2</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p><button id="btnTest">button test2</button></p>
<a href="#page1" >back to page1</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>