2015-10-15 109 views
2

我有以下g:submitButtonG:submitButton-的onclick不起作用

<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没有按没有工作)。

+1

呈现的HTML是否包含'onclick =“return showSpinnerSignUp()”'? –

+0

不确定这是你的情况,但提交应该刷新页面,使onclick中的任何DOM修改无用。而是尝试使用ajax。 (检查我的想法,将showSpinnerSignUp的返回值更改为false,如果您看到微调框,则表示我是正确的) – Fernando

回答

0

这是浏览器中表单提交的默认行为。您点击一个按钮时注册了一个showSpinnerSignUp()方法,同时单击该按钮负责提交封闭表单。

由于浏览器提交表单的内置行为通过向服务器完整往返传输而起作用,因为浏览器正在导航离开当前页面,所以这会立即中断您的代码执行事件onclick事件。

这可以模拟,就好像你点击了你的按钮并立即刷新页面。当您将其部署到生产服务器时,您的当前设置可能会有效,但在本地使用此设置的可能性很低,因为本地开发服务器用于在更快的机器上运行,因此表单提交的页面刷新时间更快。

要验证发生这种情况,请打开浏览器的控制台,直接调用方法showSpinnerSignUp()(记得从$(function() {})暂时删除它)并查看微调器是否显示。

此外,还有一个Preserve Logs选项,它可以在刷新页面后保持Javascript控制台日志。所以,在你的方法调用中加入一个简单的console.log(),然后尝试点击该按钮。你会看到你的方法被调用,但由于表单提交,没有显示微调。