JQuery Mobile - 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: <textarea id="js-result" style="width:80%;vertical-align:top"></textarea></p>
<div>Result focusout <p id="result-of-click"></p></div>
<div>Result blur <p id="result-of-blur"></p></div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
<div data-role="controlgroup" data-type="horizontal">
<input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" />
<input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" />
</div>
</div><!-- /footer -->
</div><!-- /page -->
JavaScript
$("#js-result").focusout(function (eventObject) {
debugger<
var relatedTarget = eventObject.relatedTarget;
var message = "[DEBUG] - [FOCUSOUT] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;
$("#result-of-click").text(message);
console.log(message);
});
$("#js-result").blur(function (eventObject) {
var relatedTarget = eventObject.relatedTarget;
var message = "[DEBUG] - [BLUR] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;
$("#result-of-blur").text(message);
console.log(message);
});