javascript - 使用 JQuery.throwable 将 div 添加到场景

Question

我正在尝试使用 jQuery 添加一个函数，该函数将一个 div 添加到由带有 JQuery.throwable 的 div 组成的父 div 中。分配给他们的物理引擎。

我做了一个 <p>同类.button有这个 jQuery 代码:

$(".button").click(function () {
$("#wrapper").append('<div class="instrument bass"></div>');

我还必须重新启动 JQuery.Throwable 函数以使新的 div 与重力引擎分开，因此添加新的 div 的代码如下所示:

$(".button").click(function () {
$("#wrapper").append('<div class="instrument bass"></div>');    
$(".bass").throwable({
          containment:"parent",
          drag:true,
          gravity:{x:0,y:0},
          impulse:{
                   f:52,
                   p:{x:1,y:1}
                  },
          shape:"circle",
          autostart:true,
          bounce:2,
          damping:2,
          areaDetection:[[0,0,300,300]],
          collisionDetection: true
});

#wrapper是作为整个场景容器的 div，覆盖 100vh和 100w整个浏览器窗口，因此弹跳的 div 不会从容器中掉出来。容器中的元素以类 instrument 命名。并且它们的颜色随着附加类的变化而变化 bass , drums , lead和 chord .

当点击 .button 时我想用类 instrument bass 添加一个新的 div如上面的代码所示。我之前遇到过一些“旧”div 的首字母问题，但后来我添加了 #wrapper。并添加了 containment: "parent"通过 jQuery 为不同的类提供选项，这很有效。

现在的问题是，如果我连续添加几个新的 div，所有元素之间的碰撞就会开始变得奇怪。就好像场景中有不可见的盒子或其他东西会在所有元素之间产生这种意想不到的痉挛性碰撞。我试过添加 display:inline-block至 .instrument看看是否解决了问题，但没有。

我猜我在添加新 div 的代码中犯了一些错误。也许有某种方法可以简化它并摆脱这种奇怪的碰撞？我在下面添加了一个 Plunker。首先尝试绕过现有的 div 以查看其行为方式，然后添加几个新的 div 以查看其行为方式。

笨蛋: http://plnkr.co/edit/89LT1xqJZmLznymNypKL?p=preview

Answer 1

在$(document).ready(function() 开头添加button.click事件希望这会起作用，因为它对我有用。

 $(document).ready(function() {
 $(".button").click(function () {
 $("#wrapper").append('<div class="instrument bass"></div>');
 $(".bass").throwable({
                    containment:"parent",
                    drag:true,
                    gravity:{x:0,y:0},
                    impulse:{
                        f:52,
                        p:{x:1,y:1}
                    },
                    shape:"circle",
                    autostart:true,
                    bounce:2,
                    damping:2,
                    areaDetection:[[0,0,300,300]],
                    collisionDetection: true
                });
});