3

我想就我的主脚本上的 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);
        }

    });
});
4

1 回答 1

5

Try return false to block 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;
});

UPDATE: Well, I checked source code of jQuery Mobile and found that jQM prevent form submit by default, and handle with 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 is invalid because submit is done by $.mobile.changePage not browser.

So, if wanna prevent submit, that is $.mobile.changePage, I have two suggestions:

1. Add 'data-ajax=false' attribute to form element

demo1

2. Do ajax when submit button clicked

demo2

于 2013-08-27T02:23:05.450 回答