$("form").submit(function() 在 Firefox 中不起作用

Posted 2023-05-09

【中文标题】$("form").submit(function() 在 Firefox 中不起作用

【英文标题】：$("form").submit(function() Not working in Firefox$("form").submit(function() 在 Firefox 中不起作用

【发布时间】：2016-08-01 14:54:53

【问题描述】：

    $("form").submit(function() 
        if ($("#content") != null) 
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        
        return true;
    );

以上在 Chrome 上运行良好，但在 Firefox 上不运行。不知道为什么，但在 Firefox 中，表单实际上并没有提交。 div 替换有效，但提交时不喜欢，页面只是保持空闲状态。

这里的目的是捕获任何形式的提交并将微调器（CSS 不是图像）扔到页面上，直到返回 post/put 并且微调器被页面重新加载上的实际内容 div 清除（非ajax）。

之前：

之后：

代码已删除（帖子现在出现）：

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post" role="form">

            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" placeholder="E-mail" type="email" value="" /></div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password" /></div>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    </br>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    <input class="btn" name="commit" type="submit" value="Sign in" />
                    <div class="m-t-20">

<a href="/users/password/new">Forgot your password?</a><br/>

<a href="/users/confirmation/new">Didn&#39;t receive confirmation instructions?</a><br/>

<a href="/users/unlock/new">Didn&#39;t receive unlock instructions?</a><br/>

                    </div>
                </div>
            </div>
            <!-- end row -->

<script>
$(document).ready(function () 
    App.init();

    $("form").submit(function()
        if ($("#content") != null) 
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        
        return true;
        alert("Submitted");
    );
);

$(function () 
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
);

更新：

好吧，我是个白痴，但出于某种原因，这并没有引起我的注意。发生的事情是#content div 包含我要替换的表单。所以对我来说神秘的是为什么它在 Chrome / IE 中有效，而不是在 Firefox 中？

如果我使用以下它可以工作，但我会得到一些悬空的表单元素：

$("form").submit(function()
        if ($("#content") != null) 
            $("#content").append('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        
        return true;
    );

【问题讨论】：

你检查过网络标签吗？

尝试重新启动服务器并重新加载整个页面它会工作......

我尝试重启服务器 我已经添加了网络跟踪，很明显表单没有提交。当我删除此代码时，它工作得很好。

firefox 中的任何 console.error

能否提供firefox浏览器日志和chrome日志

【参考方案1】：

我建议你设置一个输入类型提交并点击，然后你可以执行你的代码。

$("#submit_form_id").on("click",
function(e)
e.preventDefault();

//your specific code
$("#formId").submit();
);

它会很好用！

【讨论】：

不喜欢，早点尝试过这种方法......我什至用#new_user而不是通用的“表单”尝试过。

【参考方案2】：

试试这个，

$(document).ready(function()
    $("form").submit(function()
 if ($("#content") != null) 
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        
        return true;
        alert("Submitted");
    );
);

【讨论】：

刚试过这个，没有爱。我正在将表单和脚本添加在一起，看看是否能有所启发。

` if ($("#content") != null) ` 而不是 if ($('#content').val() != '') 试试这个，我相信它应该对你有帮助

所以微调器正在显示，如果我阻止微调器显示使用 js 提交的表单。我相信这与 dom 以及 Firefox 是如何处理的有关。如果我只是离开 js 而不添加微调器，一切都很好......想知道我是否应该使用 .append 到正文而不是 .replace