javascript - g:submitButton- onclickが機能しない

原文 javascript grails onclick tags submit-button

次の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は機能しません)。
答え
これは、ブラウザでのフォーム送信のデフォルトの動作です。ボタンのクリックでshowSpinnerSignUp()メソッドを登録しましたが、同じボタンをクリックすると、それを囲むフォームが送信されます。

ブラウザがフォームを送信するための組み込みの動作は、サーバーへの完全な往復を行うことによって機能するため、ブラウザが現在のページから移動しているため、onclickイベントのコード実行がすぐに中断されます。

これは、ボタンをクリックしてページをすぐに更新したかのようにシミュレートできます。これを本番サーバーにデプロイすると現在の設定が機能する可能性がありますが、この設定をローカルで操作する可能性は低いです。これは、ローカル開発サーバーがより高速なマシンで実行されていたため、フォーム送信のページ更新時間が大幅に短縮されたためです。

これが発生していることを確認するには、ブラウザのコンソールを開き、メソッドshowSpinnerSignUp()を直接呼び出し(一時的に$(function() {})から削除してください)、スピナーが表示されているかどうかを確認します。

また、ページを更新した後でもJavaScriptコンソールログを保持するオプションがPreserve Logsにあります。したがって、単純なconsole.log()をメソッド呼び出し内に配置してから、そのボタンを押してみてください。メソッドが呼び出されますが、フォームの送信によりスピナーは表示されません。
関連記事

javascript - 私のAPIからのデータでngTableを機能させようとする

javascript - Wordpressカスタマイザプレビュースクリプトは、プレビューウィンドウから内部ページに移動している間ではなく、初期ページのロード時にライブプレビューを実行します

javascript - Safari 9.0のみでのAjax呼び出しのDOMエラー

javascript - jqgridの編集モードでは、デフォルトで特定の列からカーソルを開始できますか?

javascript - i18nextとJade変数を連結する

javascript - JavaScript:IndexedDBストアのgetメソッドに増分値を渡してリセットする方法は?

javascript - serializeObjectの出力形式を変更するにはどうすればよいですか?

javascript - モバイルデバイスでのみ応答するブートストラップを有効にする

javascript - AngularJS-プルして更新

javascript - tinymce 4スペルチェッカーメソッドをオーバーライドする