jquerymobile form not working as expected on mobile browsers, but works on desktop browsers? - jquery-mobile

Question

I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).
The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).
An example of the form can be seen here.
The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.
$('body').delegate('#byEmail_label', 'click tap', (function(event) {
if (!$("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
})
);
I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.
Has anyone experienced something similar, or have any idea how I can get this working?
Thanks

Answer 1

Finally fixed my own problem by moving all my jquery outside the
$(document).ready(function () {...
and into
$('*').delegate('body','pagecreate', function(){...
ie:
$('*').delegate('body','pagecreate', function(){
$('#byEmail_label').tap(function(event) {
if ($("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
});
});
Now my head feels better... no more banging it on the desk...

Answer 2

I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.
alert($('input[name=byEmail]:checked').val());
or
var cb_val = $('input[name=byEmail]:checked').val() == true;
or
var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;
Maybe something like this
var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;
if(addValidation) {
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
} else {
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}