点击按钮无移动：设置随机边距实现按钮移动功能失效求助

你的按钮点击后无法移动，主要有几个核心问题，对应解决方法如下：

1. 缺少jQuery依赖 #

你的JS代码使用了$(window)、$("button")这类jQuery语法，但如果页面未引入jQuery库，浏览器会抛出$ is not defined的错误，直接导致功能失效。

解决：
确保页面中已引入jQuery库（可通过本地文件或CDN方式加载）。

2. 按钮未脱离文档流 #

默认状态下，<button>是inline-block元素，属于文档流的一部分，调整margin-top和margin-left只会在文档流范围内移动，无法实现窗口内的自由随机定位。

解决：
给按钮添加CSS定位，让它脱离文档流：

#bouncing {
  position: absolute;
}

3. 代码优化与修正 #

你的代码混合了原生JS和jQuery语法，且重复查询DOM元素，建议统一风格并简化逻辑：

优化后的jQuery版本 #

<button id="bouncing" class="btn btn-primary">Click Me</button>

<style>
#bouncing {
  position: absolute;
}
</style>

<script>
$(function() {
  const $btn = $("#bouncing");
  $btn.on("click", function() {
    const winH = $(window).height();
    const winW = $(window).width();
    const btnH = $btn.height();
    const btnW = $btn.width();
    const top = Math.random() * (winH - btnH);
    const left = Math.random() * (winW - btnW);
    $btn.css({
      top: `${top}px`,
      left: `${left}px`
    });
  });
});
</script>

纯原生JS版本（无需jQuery） #

如果不想依赖第三方库，也可以用纯原生代码实现，兼容性更好：

<button id="bouncing" class="btn btn-primary">Click Me</button>

<style>
#bouncing {
  position: absolute;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const btn = document.getElementById("bouncing");
  btn.addEventListener("click", function() {
    const winH = window.innerHeight;
    const winW = window.innerWidth;
    const btnH = btn.offsetHeight;
    const btnW = btn.offsetWidth;
    const top = Math.random() * (winH - btnH);
    const left = Math.random() * (winW - btnW);
    btn.style.top = `${top}px`;
    btn.style.left = `${left}px`;
  });
});
</script>

说明：改用top和left代替margin，在绝对定位下更直接可控，避免margin可能带来的布局干扰。

内容的提问来源于stack exchange，提问作者El Meron