Javascript 为什么这两个jQuery函数都不是在单击时启动的？

好的，我有两个jQuery函数。其中一个是对div的简单爆炸效果。另一个功能通过在div周围发送一个圆圈中的粒子来增强爆炸效果。当我在设置了这两个功能的情况下单击div时，它将仅激发爆炸效果，而不会激发带有我站点上碎片的功能

奇怪的事

在JSFIDLE中，碎片起作用，而不是爆炸，但在我的网站上，爆炸效应起作用，而不是碎片

以下是JSFIDLE示例：

注意：我的站点和JSFIDLE示例都使用相同的jQuery版本，即jQuery-1.9.1

这是我的密码

<style>
.debris {
 display: none;   
 position: absolute;
 width: 28px;
 height: 28px;
 background-color: #ff00ff;
 opacity: 1.0;
 overflow: hidden;
 border-radius: 8px;
}

#bubble {
  position:absolute;
  background-color: #ff0000;
  left:150px;
  top:150px;
  width:32px;
  height:32px;
  border-radius: 8px;
  z-index: 9;
}
</style>
<div id="content">
    <div id="bubble"></div>
    <div id="dummy_debris" class="debris" />
</div>
<script>
// jQuery bubble pop animation
// Ben Ridout (c) 2013 - http://BenRidout.com/?q=bubblepop
// You're free to use this code with above attribution (in source is fine).

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });
});
 $( "#bubble" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
function r2d(x) {
    return x / (Math.PI / 180);
  }

  function d2r(x) {
    return x * (Math.PI / 180);
  }

  function pop(start_x, start_y, particle_count) {
    arr = [];
    angle = 0;
    particles = [];
    offset_x = $("#dummy_debris").width() / 2;
    offset_y = $("#dummy_debris").height() / 2;

    for (i = 0; i < particle_count; i++) {
      rad = d2r(angle);
      x = Math.cos(rad)*(80+Math.random()*20);
      y = Math.sin(rad)*(80+Math.random()*20);
      arr.push([start_x + x, start_y + y]);
      z = $('<div class="debris" />');
      z.css({
          "left": start_x - offset_x,
          "top": start_y - offset_x
      }).appendTo($("#content"));
      particles.push(z);
      angle += 360/particle_count;
    }

    $.each(particles, function(i, v){
      $(v).show();
      $(v).animate(
        {
          top: arr[i][1], 
          left: arr[i][0],
          width: 4, 
          height: 4, 
          opacity: 0
        }, 600, function(){$(v).remove()
      });
    });
  }
</script>

.碎片{
显示：无；
位置：绝对位置；
宽度：28px；
高度：28px；
背景色：#ff00ff；
不透明度：1.0；
溢出：隐藏；
边界半径：8px；
}
#泡泡{
位置：绝对位置；
背景色：#ff0000；
左：150px；
顶部：150px；
宽度：32px；
高度：32px；
边界半径：8px；
z指数：9；
}
//jQuery气泡弹出动画
//Ben Ridout（c）2013-http://BenRidout.com/?q=bubblepop
//您可以自由地使用上述属性的代码（在源代码中就可以了）。
$（函数（）{
//文件准备好了
$（“#气泡”）。在（“单击”上，函数（e）{
流行音乐（e.pageX，e.pageY，13）；
});
});
$（“#气泡”）。单击（函数（）{
切换（“爆炸”，{pieces:50}，2000）；
});
函数r2d（x）{
返回x/（数学PI/180）；
}
函数d2r（x）{
返回x*（Math.PI/180）；
}
函数pop（开始x、开始y、粒子计数）{
arr=[]；
角度=0；
粒子=[]；
偏移量x=$（“#虚拟碎片”）。宽度（）/2；
偏移量y=$（“#虚拟碎片”）。高度（）/2；
对于（i=0；i

从你的小提琴上看，你似乎没有包括在内

---

从你的小提琴上勾选这个，似乎你没有包括在内

---

选中此项

您没有在

$（函数）

处理程序中放置第二次单击事件。将这两个事件放入

$（函数）

处理程序中

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });

$( "#bubble" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
});

---

工作演示：

您没有将第二次单击事件放入

$（函数）

处理程序中。将这两个事件放入

$（函数）

处理程序中

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });

$( "#bubble" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
});

---

工作演示：

两个单击处理程序都应该在

$（function（）{}）

中，您需要包含

jqueryui

才能工作。因为它使用的是缓和。。在启用jQueryUi的情况下检查此小提琴。。苏珊特，你太棒了！！谢谢。很高兴能帮上忙：）。。如果某些东西停止工作，检查开发工具总是有帮助的。@Sushanth--我错过了查看/加载注释的机会。两个单击处理程序都应该在

$（function（）{}）

中，您需要包含

jQuery Ui

，这样才能工作。因为它使用的是缓和。。在启用jQueryUi的情况下检查此小提琴。。苏珊特，你太棒了！！谢谢。很高兴能帮上忙：）。。如果某些东西停止工作，检查开发工具总是有帮助的。@Sushanth——我错过了查看/加载注释的机会。