jQuery Mobile does not listen to e.PreventDefault

jQuery Mobile does not listen to e.PreventDefault

本文关键字：to PreventDefault listen not Mobile does jQuery      更新时间：2023-09-26

我想在我的主脚本上寻求关于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);
        }
    });
});

尝试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;
});

更新：好吧，我检查了jQueryMobile的源代码，发现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

相关文章：