javascript - Why are these two jQuery functions both not firing on click? -

okay, have 2 jquery functions. 1 of them simple explode effect on div. other function enhances explode effect sending particles in circle around div. when click on div both functions set, fire explode effect , not function debris on site.

something strange

in jsfiddle debris working , not explode, on site explode effect working not debris.

here jsfiddle example: jsfiddle.net/fyb98/3/

note: i'm using same jquery version both site , jsfiddle example, that's jquery-1.9.1.

this code

<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 use code above attribution (in source fine).  $(function(){   // document ready   $("#bubble").on("click", function(e) {     pop(e.pagex, e.pagey, 13);   }); });  $( "#bubble" ).click(function() {   $( ).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;      (i = 0; < 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> 

from fiddle, seems missed include jquery ui.

check fiddle