JQuery Mobile hide/show header- issue with Safari
Testing issue on Safari that causes focusout to be incorrect
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 src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://mathquill.com/mathquill/mathquill.css">
<script src="http://mathquill.com/mathquill/mathquill.min.js"></script>
<div id="foo" data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Click here:</p>
<input type="button" data-custom-selector-attribute="true" name="btnTest" class="my-custom-selector-class" id="btnTest" value="Test" />
<p id="focus-attribute-result"></p>
<p id="focus-class-result"></p>
<p id="click-attribute-result"></p>
<p id="click-class-result"></p>
</div><!-- /content -->
<div id="mioDiv">
<form id="logForm" method="post">
<input type="text" id="keyp" value="123">
<input type="submit" id="enterpass" value="Entra">
</form>
</div>
<div id="startScreen">
<h2>TESSSSSSSSSSSTTTTT</h2>
</div>
</div><!-- /page -->
JavaScript
$(document).on('focus', "input[data-custom-selector-attribute='true']", function (e) {
$("#focus-attribute-result").text("Focus - Got attribute selector!");
});
$(document).on('focus', ".my-custom-selector-class", function (e) {
$("#focus-class-result").text("Focus - Got class selector!");
});
$(document).on('click', "input[data-custom-selector-attribute='true']", function (e) {
$("#click-attribute-result").text("Click - Got attribute selector!");
});
$(document).on('click', ".my-custom-selector-class", function (e) {
$("#click-class-result").text("Click - Got class selector!");
});
var key = "123";
window.localStorage.setItem("passkey", "123");
$('#mioDiv').show();
$('#startScreen').hide();
$('#logForm').show('pageshow', function() {
$('#enterpass').click(function() {
if($('#keyp').val() == key) {
$('#logForm').parent().hide();
$('#startScreen').parent().show();
} else {
$('#startScreen').parent().hide();
$('#logForm').parent().show();
}
});
});