2

我自定义了原始表单源代码，创建了两个表单：

它们适用于除 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>
4

1 回答 1

2

只需将所有脚本包装成：

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

例如

$(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(){ ... });其中，则可以确保代码将在页面加载后执行。

于 2012-10-18T20:01:43.887 回答