jquerymobile 表单在移动浏览器上无法按预期工作，但在桌面浏览器上工作？

Question

我的 jqm 表单在移动浏览器（iPad 1 Safari、Android Dolphin）中无法正常工作，但在桌面浏览器（Chrome、Firefox、Safari 和 Win7 上的 IE9）中按预期工作时遇到问题。

该表单首先询问用户希望如何联系（电子邮件、短信和/或帖子），然后根据此选择更新所需的字段（通过validationEngine.js 插件进行验证）。

可以在此处查看该表单的示例。

该脚本的逻辑是，它检查复选框是否被选中（或取消选中），然后添加（或删除）一个类以使其成为必需的，如下所示。

$('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');   
  }
})
);

我在没有 .delegate() 的情况下 100% 工作，但是后来我无法通过 ajax 加载表单 - 添加 .delegate 后，一切都运行良好，除了在移动浏览器中。

有没有人经历过类似的事情，或者知道我如何才能让它发挥作用？

谢谢

Answer 1

最后通过将所有 jquery 移出

 $(document).ready(function () {...

并移入

$('*').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');
     }
  });
});

现在我的头感觉好多了......不再把它敲在桌子上......

Answer 2

我在复选框和单选按钮方面也遇到了麻烦，这就是我使用的。可能有助于检查该值而不是是否已检查。

alert($('input[name=byEmail]:checked').val());

或

var cb_val = $('input[name=byEmail]:checked').val() == true;

或

var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;

也许是这样的

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');   
}