jQuery非常简单的代码似乎不起作用

jQuery very simple code seems to not work

本文关键字：不起作用 代码 非常 简单 jQuery      更新时间：2023-09-26

这是我的jQuery代码：

(function() {

var overlay = {
    init: function() {
    $('<div></div>', {
        class: 'overlay'
    })
        .insertAfter('button');
    }
};
overlay.init();
})();

我希望这会在我的按钮下放一个div，但是创建的HTML不包含div：

  <body>
    <button>Reveal More Info</button>
  </body>

很抱歉，如果这是一个新手问题，我刚刚开始学习。

HTML头：

<head>
    <title>jQuery rules</title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="script.js"></script>
    <style>
    body {
      background: yellow;
    }
    button {
      margin: 100px 0 0 200px;
    }
    div {
      display: none;
      width: 600px;
      height: 400px;
      background-color: white;
      border-radius: 40px;
      position: absolute;
      left: 25%;
      top: 30%;
    }
    </style>
  </head>

从jQuery文档中，请参阅例如。，http://api.jquery.com/jQuery/#jQuery-html属性：

区块报价名称"class"必须在对象中引用，因为它是JavaScript保留字，并且不能使用"className"，因为它引用的是DOM属性，而不是属性。

问题是您在将按钮添加到dom之前执行的头中包含script.js，因此insertAfter（）将无法找到插入div的button。

这里的解决方案是使用文档就绪处理程序，或者在正文底部（</body>之前）插入脚本

//dom ready handler
jQuery(function ($) {
    var overlay = {
        init: function () {
            $('<div></div>', {
                'class': 'overlay'
            }).insertAfter('button');
        }
    };
    overlay.init();
});

演示：Fiddle

相关文章：