Question

我正在尝试为我的网站创建评论系统。脚本用于在提交评论时显示按摩（或警报）。我自己没有足够的知识来调试和解决这个问题，所以我会问这里，直到我了解更多有关js的信息。

我的脚本导入标题中的脚本：

<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);
  }
});

我的问题是，如果我提交评论，该脚本不起作用，但如果我等了一段时间并再次提交，它就可以正常工作。

我猜它与加载脚本并运行它们有关，我在这里看到了一些类似的问题，但没有答案解决了我的问题。

Answer 1

脚本标记上的异步意味着＆＃39;异步＆＃39;。

通常，当您加载网页时，浏览器将请求（如果尚未在其更新的缓存中）所有主html中指定的文件和导入。启动时加载的其中一项是所有脚本标记。

但你在那里有异步。

所以你的代码没有运行，因为它还没有存在！

删除异步，它应该运行正常。

Javascript脚本第一次不起作用，但在此之后工作

1 个答案: