2017-07-19 11 views
0

私のサイトのコメントシステムを作成しようとしています。コメントが提出されると、マッサージ(または警告)を表示するためにスクリプトが使用されます。私はこの問題をデバッグして修正するために十分な知識がjsにないので、私はjsについてもっと学ぶまでここで尋ねるでしょう。ヘッダにあるJavascriptスクリプトは初めて動作しませんが、その後に動作します

私のスクリプトの輸入:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" async></script> 
<script type="text/javascript" src="/js/main.js" async></script> 

そして、私のmain.jsスクリプト:

// Static comments 
jQuery(document).ready(function ($) { 
    var $comments = $('.js-comments'); 

    $('#comment-form').submit(function() { 
    var form = this; 

    $(form).addClass('submitting'); 
    $('#comment-form-submit').html('Loading ...'); 

    $.ajax({ 
     type: $(this).attr('method'), 
     url: $(this).attr('action'), 
     data: $(this).serialize(), 
     contentType: 'application/x-www-form-urlencoded', 
     success: function (data) { 
     $('#comment-form-submit').html('Submitted'); 
     $('.new-comment-form .js-notice').removeClass('notice--danger').addClass('notice--success'); 
     showAlert('<p style="color:#47bd40">Thanks for your comment! It will show on the site once it has been approved.</p>'); 
     }, 
     error: function (err) { 
     console.log(err); 
     $('#comment-form-submit').html('Submit Comment'); 
     $('.new-comment-form .js-notice').removeClass('notice--success').addClass('notice--danger'); 
     showAlert('<p style="color:#e64848">Submission failed, please fill in all the required inputs.</p>'); 
     $(form).removeClass('submitting'); 
     } 
    }); 

    return false; 

    }); 

    function showAlert(message) { 
    $('.new-comment-form .js-notice').removeClass('hidden'); 
    $('.new-comment-form .js-notice-text').html(message); 
    } 
}); 

私の問題は、私がコメントを提出した場合、スクリプトが動作しない、ありますしかし、私がいつか待って再び提出すれば、それはうまく動作します。

私はそれがスクリプトの読み込みと実行と関係があると推測していますが、私はここでいくつかの同様の質問を見ましたが、答えの中で私の問題は解決しませんでした。

+0

私のサイトのコメントフォームです: https://squircleart.github.io/animation-nodes/hud-in-animation-nodes.html#comment-form –

+5

スクリプトから 'async'を削除するだけです輸入... – Hackerman

+0

あなたは歓迎です:) – Hackerman

答えて

2

スクリプトタグの非同期は、「非同期」を意味します。

通常、ウェブページを読み込むと、ブラウザーはメインのHTMLに指定されているすべてのファイルとインポートを要求します(既に更新されたキャッシュにない場合)。起動時に読み込まれるこれらの要素の1つは、すべてスクリプトタグです。

しかし、そこに非同期があります。

コードがまだ存在しないため、コードが実行されていません。

非同期を削除すると問題なく動作します。

関連する問題