IE（8）中的Ajax表单提交[关闭]

                <div class="grid--cell fl1 lh-lg">
                    <div class="grid--cell fl1 lh-lg">
                        This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time,   or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making   this question more broadly applicable, <a href="/help/reopen-questions">visit the help center</a>.

                    </div>
                </div>
            </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2012-10-19 00:40:57Z" class="relativetime">7 years ago</span>.</div>
        </div>
    </aside>

I customized the original form source code and created two forms:

They work in all browsers except IE(8). What's wrong?

First form:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>First form</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <form method="POST" id="ss-form">
    <br>
    <div class="errorbox-good">
      <div class="ss-item  ss-text">
        <div class="ss-form-entry">
          <label class="ss-q-title" for="entry_0">Name
          </label>
          <label class="ss-q-help" for="entry_0"></label>
          <input type="text" name="entry.0.single" class="ss-q-short" value="" id="entry_0">
        </div>
      </div>
    </div>
    <br>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <div class="ss-item ss-navigate">
      <div class="ss-form-entry">
        <input type="submit" name="submit" value="Submit">
      </div>
    </div>
  </form>
  <script>
    $("#ss-form").submit(function (event) {
      event.preventDefault();
      $.ajax({
        type: 'POST',
        url: 'https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq',
        data: {
          'entry.0.single': $('#entry_0').val()
        },
        success: function () {
          alert('Thanks!');
        }
      });
    });
  </script>
</body>

</html>

Second form:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Second form</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <form method="POST" id="ss-form">
    <br>
    <div class="errorbox-good">
      <div class="ss-item  ss-text">
        <div class="ss-form-entry">
          <label class="ss-q-title" for="entry_0">Name
          </label>
          <label class="ss-q-help" for="entry_0"></label>
          <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">
        </div>
      </div>
    </div>
    <br>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <div class="ss-item ss-navigate">
      <div class="ss-form-entry">
        <input type="submit" name="submit" value="Submit">
      </div>
    </div>
  </form>
  <script>
    $("#ss-form").submit(function (event) {
      event.preventDefault();
      $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(),
        function () {
          alert('Thanks!');
        }
      );
    });
  </script>
</body>

</html>

</div>

Just wrap all your script into:

$(function(){ ... });

E.g.

$(function(){

    $.support.cors = true; // for cross-origin requests in IE

    $("#ss-form").submit(function(event) {   
        event.preventDefault();   
        $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(),  
          function() {  
              alert('Thanks!');  
          }  
        );  
      });

});

Your event callbacks are being assigned when document is not loaded to the end and event targets do not exist in DOM yet. If you wrap your scripts into $(function(){ ... }); then it assures that code will be executed AFTER the pages were loaded.