I am trying to show some help text for some form inputs when a user focuses on them on a tablet.
I am using jQuery Mobile to render the controls.
My problem is that jQuery Mobile does not seem to raise the focus event for radio buttons, or checkboxes as well for that matter.
The documentation suggests that this should work:
http://jquerymobile.com/test/docs/forms/radiobuttons/events.html
Example code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(document).bind('pagecreate', function(event) {
$('div.ui-field-contain input').focus(function(event) {
$('div#log').append('<p>Focussed on ' + this.id + '</p>');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Test page</h1>
</div>
<div data-role="content">
<form>
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<label><input type="radio" name="question" value="yes" id="radio-yes"/>Yes</label>
<label><input type="radio" name="question" value="no" id="radio-no"/>No</label>
</div>
</div>
<div data-role="fieldcontain">
<label>Some Question: <input type="text" name="anotherQuestion" id="input-text"/></label>
</div>
</form>
</div>
<div id="log"></div>
</div>
</body>
</html>