title: On click function appears to be active after element removal
body: <p>I'm making a program that finds the shortest path in a graph, this program is created on click by appending divs to a container. The main program appears to work as intended, the problem arises when I remove the program and start it again. The functions appear to execute 2 times.</p>
  
  <p>You can see the problem on <a href="http://runaider.github.io/" rel="nofollow">http://runaider.github.io/</a> just click "Path Finder" then create some vertexes, click "Path Finder" again and try to create vertexes again you'll see the problem. </p>
  
  <p>I tried using .remove(), .unbind(), .cleanData() but nothing helps.</p>
  
  <p>This is one of the functions that i spoke of</p>
  
  <pre><code>$(document).on ("click", "#B1", function () {
      count++;
      alert(count);
      $('.MainField').append(
          $('&lt;div class="Vertex"&gt;').attr("id","V"+count).text("V"+count)
      );
      jsPlumb.draggable('V'+count, {containment:"parent"})
  });
  </code></pre>
  
  <p>This is how i remove the the objects:</p>
  
  <pre><code>function DispandGraphField(){
  jsPlumb.detachEveryConnection();
  $('.MainField').animate({opacity:0},1000,function(){});
  $('.Options').animate({opacity:0},1000,function(){
      $('.Graph').animate({width:1,height:1,borderRadius:180},700,function(){
          $('#B1').unbind();
          $('.OptionsSec1').empty();
          $('.OptionsSec2').empty();
          $('.Options').empty();
          $('.Graph').remove();
      });
  });
  </code></pre>
  
  <p>If you need to see all the code look here <a href="https://github.com/Runaider/Runaider.github.io" rel="nofollow">https://github.com/Runaider/Runaider.github.io</a> (script.js and GraphScript.js)</p>
  
  <p>I have probably made some stupid mistakes and would appreciate your help in finding and solving them. </p>