javascript - g:submitButton- onclick不起作用

Question

我有以下g:submitButton:

 <g:submitButton name="next" class="signup-button skyblue-btn pull-right pl-pr-36" value="${message(code:"buttons.ok")}" onclick="return showSpinnerSignUp()"/>

我在JS文件中定义showSpinnerSignUp():

$(function() {
    function showSpinnerSignUp(){
        $('.spinner-ctn').show();
        return true;
    }
});

微调器不显示(onclick不起作用)。

Answer 1

这是浏览器中表单提交的默认行为。单击按钮时，您已经注册了showSpinnerSignUp()方法，而单击同一按钮则负责提交附表。

由于浏览器的提交表单的内置行为是通过与服务器进行完整往返来实现的，因此，由于浏览器正在离开当前页面，因此这立即中断了onclick事件的代码执行。

可以像单击按钮并立即刷新页面一样模拟。当您将当前的设置部署到生产服务器时，当前的设置可能会起作用，但是在本地使用此设置的可能性很低，因为过去本地开发服务器运行在更快的计算机上，因此表单提交的页面刷新时间相当快。

为了验证这种情况，请打开浏览器的控制台并直接调用showSpinnerSignUp()方法(记住暂时将其从$(function() {})中删除)，然后查看微调器是否正在显示。

另外，Preserve Logs有一个选项，即使页面刷新后，该选项仍保留Javascript控制台日志。因此，将一个简单的console.log()放入您的方法调用中，然后尝试单击该按钮。您会看到您的方法被调用，但是由于表单提交而未显示任何微调器。