php - jQuery Mobile 不听 e.PreventDefault

Question

我想就我的主脚本上的 jQuery Mobile 插件冲突寻求帮助。我正在尝试创建该网站的另一个版本，即移动版本，其中包含使用 jQuery Mobile 购买的模板。该站点仍然使用基于网络版本的 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

尝试返回false来阻止提交。

$('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 而不是浏览器完成的。

所以，如果想阻止提交，也就是$.mobile.changePage，我有两个建议:

<强>1。将“data-ajax=false”属性添加到 form 元素

demo1

<强>2。单击提交按钮时执行 ajax

demo2