Question

我正在尝试生成div on click的正文，并希望动态分配位置。应在用户点击的位置生成div。

我得到了点击的位置，但不知道如何将其分配给当前生成的元素。

提前感谢您的帮助。

$('body').on('click', function(e) {
    $('body').append("<div class='bubble'></div>");
    console.log(e.pageX, e.pageY);
    $('bubble').css({
        'top': e.pageX,
        'left': e.pageY
    });

});

*{ transition: all 0.5s ease; }
html,
body{
    height:100%;
    width: 100%;
}
.bubble{
    height: 100px;
    width: 100px;
    background: #99c8fd;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>Click here</body>

Answer 1

使用带有设置CSS规则的jQuery(html,attributes)创建一个jQuery对象，然后附加它。

$('body').on('click', function(e) {
  var elem = $("<div />", {
    "class": "bubble"
  }).css({
    'top': e.pageY,
    'left': e.pageX
  });
  $('body').append(elem);
});

* {
  transition: all 0.5s ease;
}
html,
body {
  height: 100%;
  width: 100%;
}
.bubble {
  height: 100px;
  width: 100px;
  background: #99c8fd;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>Click here</body>

将动态位置添加到我追加的元素中

1 个答案: