Question

我自定义了原始表单源代码并创建了两种形式：

它们适用于IE（8）以外的所有浏览器。怎么了？

第一种形式：

<!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>

第二种形式：

<!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>

Answer 1

将所有脚本包装成：

$(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!');  
          }  
        );  
      });

});

当文档未加载到结尾并且DOM中不存在事件目标时，将分配您的事件回调。如果将脚本包装到$(function(){ ... });，那么它可以确保在加载页面后执行代码。

IE中的Ajax表单提交（8）

1 个答案: