jQuery Mobile不会收听e.PreventDefault

Question

我想在主要脚本上请求有关jQuery Mobile插件冲突的帮助.我试图创建另一个版本的网站,这是一个移动版本与购买模板使用jQuery Mobile.该网站仍然是基于Web版本的CodeIgniter框架.

在我的主脚本中,我在每个表单提交上都有一个preventDefault()函数来显示验证错误.然后,当我迁移我正在使用购买的移动模板的网站时,似乎不会收听preventDefault().每当我提交表单时,它都会显示验证错误,但会在我读取之前几秒钟更改页面.它刷新了网站.

我的脚本看起来像下面的代码.这适用于我的网络版.>>>

$('form#frm-signup-updates').submit(function(e){

    e.preventDefault();

    $.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){

        if(data == 'success'){
            loadpopup();
        }
        else{
            var json = $.parseJSON(data);
            $("span.error-notif#name").append(json.name);
            $("span.error-notif#email").append(json.email);
        }

    });
});

Answer 1

试着return false阻止submit.

$('form#frm-signup-updates').submit(function(e){

    $.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){

        if(data == 'success'){
            loadpopup();
        }
        else{
            var json = $.parseJSON(data);
            $("span.error-notif#name").append(json.name);
            $("span.error-notif#email").append(json.email);
        }

    });
    return false;
});

更新: 嗯,我检查了jQuery Mobile的源代码,发现jQM默认阻止表单提交,并使用ajax处理.

        //bind to form submit events, handle with Ajax
        $.mobile.document.delegate("form", "submit", function(event) {
            var formData = getAjaxFormData($(this));

            if (formData) {
                $.mobile.changePage(formData.url, formData.options);
                event.preventDefault();
            }
        });

preventDefault是无效的,因为submit不是由$.mobile.changePage浏览器完成的.

所以,如果想要阻止submit,那么$.mobile.changePage,我有两个建议:

1.将"data-ajax = false"属性添加到form元素

demo1的

2.单击提交按钮时执行ajax

DEMO2