单击功能在元素删除后似乎处于活动状态

Question

我正在制作一个程序，在图表中找到最短路径，通过将div添加到容器中，可以在单击时创建该程序。主程序似乎按预期工作，当我删除程序并再次启动时出现问题。这些函数似乎执行了2次。

您可以在http://runaider.github.io/上看到问题，只需点击“路径查找器”，然后创建一些顶点，再次单击“路径查找器”并尝试再次创建顶点，您将看到问题。

我尝试使用.remove（）,. unbind（）,. makeanData（），但没有任何帮助。

这是我所说的功能之一

$(document).on ("click", "#B1", function () {
    count++;
    alert(count);
    $('.MainField').append(
        $('<div class="Vertex">').attr("id","V"+count).text("V"+count)
    );
    jsPlumb.draggable('V'+count, {containment:"parent"})
});

这就是我删除对象的方法：

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();
    });
});

如果您需要查看所有代码，请查看https://github.com/Runaider/Runaider.github.io（script.js和GraphScript.js）

我可能犯了一些愚蠢的错误，并感谢你帮助找到并解决它们。