Question

我尝试使用jQuery添加一个函数，该函数将div添加到父div中，div包含分配给它们的JQuery.throwable物理引擎的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和{{1} }。

点击chord时，我想添加一个包含.button类的新div，如上面的代码所示。我在＆＃34; old＆＃34;中遇到了一些姓名首字母缩写。 div之前从包含中掉出来了，但后来我添加了instrument bass并通过jQuery将#wrapper选项添加到不同的类中，这很有效。

现在的问题是，如果我连续添加几个新的div，所有元素之间的碰撞开始变得奇怪。如果场景中有隐形的盒子或东西会在所有元素之间产生意外和痉挛的碰撞。我已尝试将containment: "parent"添加到display:inline-block以查看是否已解决此问题，但事实并非如此。

我猜测我在添加新div的代码中犯了一些错误。也许有某种方法来简化它并摆脱这种奇怪的碰撞？我在下方添加了一个Plunker。首先尝试抛出现有的div以查看它应该如何操作，然后添加几个新的div来查看它的行为。

Plunker： 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
                });
});

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

1 个答案: