jQuery Mobile selectmenu focus and blur event won't fire
Question
I am trying to hide a footer when a form element is given focus. I also want to show a footer when a form element loses focus, which the blur event should handle. I can't get the focus or blur event to fire on a jQuery Mobile selectmenu form element.
Here is an example of one of my form elements -
<select id="radiology-study-provider" class="selectList"></select>
Here is the jQuery code that is supposed to hide my footer on focus and show it on blur (it is inside DOM ready) -
$('.selectList').change(function(){
console.log("the change event is firing");
});
$('.selectList').focus(function(){
$('div:jqmData(role="footer")').hide(); // hide the footer
});
$('.selectList').blur(function(){
$('div:jqmData(role="footer")').show(); // show the footer
});
It is strange that the change event handler fires but focus and blur will not.
I have tried this below and it won't work -
$('.selectList').on('focus', function(){
$('div:jqmData(role="footer")').hide(); // hide the footer
});
$('.selectList').on('blur', function(){
$('div:jqmData(role="footer")').show(); // show the footer
});
I also tried this -
$('.selectList').bind( "focus", function(event, ui) {
$('div:jqmData(role="footer")').hide(); // hide the footer
});
$('.selectList').bind( "blur", function(event, ui) {
$('div:jqmData(role="footer")').hide(); // hide the footer
});
I also tried the focusin() and focusout() events with no luck either. I tried dozens of selectors (div.ui-select was one of them). I don't think it is an issue with the selector I am using.
I am using jQuery Mobile 1.1.0 and jQuery 1.7.1 - I have checked the jQuery Mobile selectmenu documentation at http://jquerymobile.com/test/docs/forms/selects/events.html , talked to the google, searched here, and can't find this issue out.
3 answers
solution1
4 ACCPTED 2012-09-21 17:16:27
This is what ended up working for me.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
document.addEventListener("hidekeyboard", onKeyboardHide, false);
document.addEventListener("showkeyboard", onKeyboardShow, false);
}
function onKeyboardHide() {
$('div:jqmData(role="footer")').show(); // show the footer
}
function onKeyboardShow() {
$('div:jqmData(role="footer")').hide(); // hide the footer
}
I came across this here on stack - Show hide keyboard is not working propery in android phonegap and noticed there are those 2 events you can listen for.
solution2
1 2012-09-21 06:01:21
Try commenting out the focus event and try.. Sometimes when the focus event fires it is fired multiple times because of which you don't see the code that is executed...
$('.selectList').change(function(){
alert("the change event is firing");
});
// $('.selectList').focus(function(){
// $('div:jqmData(role="footer")').hide(); // hide the footer
// alert("Focus event is firing");
// });
$('.selectList').blur(function(){
//$('div:jqmData(role="footer")').show(); // show the footer
alert("Blur event is firing");
});
I commented out the focus event and the other two events seem to fire.. Remove the comments and you see the focus event getting fired multiple times..
Check FIDDLE
solution3
1 2012-09-21 07:48:12
This worked for me using the following example:
JS:
<script>
document.addEventListener("deviceready", function(){}, false);
$(function() {
$('.selectList').change(function(){
console.log("the change event is firing");
});
$('.selectList').focus(function(){
console.log("FOCUS");
$('#my_footer').hide(); // hide the footer
});
$('.selectList').focusout(function(){
console.log("FOCUS OUT");
$('#my_footer').show(); // show the footer
});
});
</script>
where #my_footer is the id of my footer (check the HTML below).
HTML:
<body>
<div data-role="page">
<div data-role="content">
<select id="radiology-study-provider" class="selectList">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
</body>
You may have a try at this example and see if this works for you mate :S
Hope this helps. Let me know about your results.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.