Question

遵循教程 - 将js类添加到html中 - 但由于某种原因，没有创建按钮。我做了多次尝试，尝试重写代码一千次，寻找任何小的拼写错误，但没有。它直接取自教程，所以我看不出有什么问题。

<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>fww</title>
  <style>
    body {
      width: 600px;
      margin: auto;
      font-family: sans-serif;
    }
    
    #contact {
      background: #e3e3e3;
      padding: 1em 2em;
      position: relative;
    }
    
    .js #contact {
      position: absolute;
      top: 0;
      width: inherit;
      display: none;
    }
    
    #contact h2 {
      margin-top: 0;
    }
    
    #contact ul {
      padding: 0;
    }
    
    #contact li {
      list-style: none;
      margin-bottom: 1em;
    }
    /* Close button on form */
    
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-weight: bold;
      font-family: sans-serif;
      cursor: pointer;
    }
    /* Form inputs */
    
    input,
    textarea {
      width: 100%;
      line-height: 2em;
    }
    
    input[type=submit] {
      width: auto;
    }
    
    label {
      display: block;
      text-align: left;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    (function() {
      $('html').addClass('js');

      var contactForm = {
        init: function() {
          $('<button><button>', {
              text: 'contact us'
            })
            .insertAfter('article:first');
        }

      };
      contactForm.init();

    })();
  </script>
</head>
<body>
  <article>
    <h1>My Awesome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <div id="contact">
    <h2>Contact Me</h2>
    <form action="#">
      <ul>
        <li>
          <label for="name">Name: </label>
          <input name="name" id="name">
        </li>
        <li>
          <label for="email">Email Address: </label>
          <input name="email" id="email">
        </li>
        <li>
          <label for="comments">What's Up?</label>
          <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        </li>
        <li>
          <input type="submit" value="Submit">
        </li>
      </ul>
    </form>
  </div>
</body>
</html>

Answer 1

问题是因为您正在使用立即调用函数表达式（IIFE）来包装您的jQuery代码。这意味着您的JS代码在页面生命周期中运行得太早。

相反，您需要使用document.ready事件处理程序来确保在您尝试访问DOM之前加载DOM。

另请注意，在jQuery中创建按钮的语法略有不同。试试这个：

$(function() {
  $('html').addClass('js');

  var contactForm = {
    init: function() {
      $('<button />').text('contact us').insertAfter('article:first');
    }
  };

  contactForm.init();
});

完整的工作片段：

<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>fww</title>
  <style>
    body {
      width: 600px;
      margin: auto;
      font-family: sans-serif;
    }
    
    #contact {
      background: #e3e3e3;
      padding: 1em 2em;
      position: relative;
    }
    
    .js #contact {
      position: absolute;
      top: 0;
      width: inherit;
      display: none;
    }
    
    #contact h2 {
      margin-top: 0;
    }
    
    #contact ul {
      padding: 0;
    }
    
    #contact li {
      list-style: none;
      margin-bottom: 1em;
    }
    /* Close button on form */
    
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-weight: bold;
      font-family: sans-serif;
      cursor: pointer;
    }
    /* Form inputs */
    
    input,
    textarea {
      width: 100%;
      line-height: 2em;
    }
    
    input[type=submit] {
      width: auto;
    }
    
    label {
      display: block;
      text-align: left;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('html').addClass('js');

      var contactForm = {
        init: function() {
          $('<button />').text('contact us').insertAfter('article:first');
        }
      };

      contactForm.init();
    });
  </script>
</head>

<body>
  <article>
    <h1>My Awesome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <div id="contact">
    <h2>Contact Me</h2>
    <form action="#">
      <ul>
        <li>
          <label for="name">Name: </label>
          <input name="name" id="name">
        </li>
        <li>
          <label for="email">Email Address: </label>
          <input name="email" id="email">
        </li>
        <li>
          <label for="comments">What's Up?</label>
          <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        </li>
        <li>
          <input type="submit" value="Submit">
        </li>
      </ul>
    </form>
  </div>
</body>

</html>

JQuery - 没有创建按钮

1 个答案: