使用jsPlumb时div的数量增加

我在HTML页面中创建了三个div元素，这三个div元素中的每一个都包含一个文本框，即其中的输入元素。 一个div成为源，而另外两个成为目标。 HTML页面有一个按钮名称切换。

源div和一个目标div之间的初始连接是在拖放的帮助下创建的。 单击切换时，它将删除源和目标之间的连接，并将在源和另一个目标之间创建新连接。 现在，在此方案中使用Google Chrome开发人员工具执行分析时，每个切换的div元素数量会继续增加2。

        var connection12 = undefined, connection13 = undefined; jsPlumb.ready(function() { var exampleGreyEndpointOptions = { endpoint:"Rectangle", paintStyle:{ width:10, height:10, fillStyle:'#666' }, isSource:true, connectorStyle : { strokeStyle:"#666" }, isTarget:true, container:$('#container'), connector : "Straight", deleteEndpointsOnDetach: true }; jsPlumb.makeSource($('div.source'), exampleGreyEndpointOptions); jsPlumb.makeTarget($('div.target'),exampleGreyEndpointOptions); jsPlumb.makeTarget($('div.target1'),exampleGreyEndpointOptions); init = function(connection){ }; connectionDelete = function(){ if(connection12 !== undefined){ jsPlumb.detach(connection12); jsPlumb.unmakeTarget($('div.target')); connection13 = jsPlumb.connect({source : $('#source'), target : $('#target1')},exampleGreyEndpointOptions); connection12 = undefined; } else{ jsPlumb.detach(connection13); jsPlumb.unmakeTarget($('div.target')); connection12 = jsPlumb.connect({source : $('#source'), target : $('#target')},exampleGreyEndpointOptions); connection13 = undefined; } }; }); jsPlumb.doWhileSuspended(function(){ jsPlumb.bind("connection", function(connInfo, originalEvent) { init(connInfo.connection); //alert("Source div id = " + connInfo.sourceId + " Target div id = " + connInfo.targetId); var input = "input#" +connInfo.sourceId; var inputval = $(input).val(); var output = "input#" +connInfo.targetId; $(output).val(inputval + " from " + connInfo.sourceId); connInfo.targetId ==='target'?connection12 = connInfo : connection13 = connInfo; }); jsPlumb.bind("click", function(conn, originalEvent) { if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?")) jsPlumb.detach(conn); }); jsPlumb.bind("connectionDrag", function(connection) { // alert("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType); }); jsPlumb.bind("connectionDragStop", function(connection) { // alert("connection " + connection.id + " was dragged"); }); jsPlumb.bind("connectionMoved", function(params) { //alert("connection " + params.connection.id + " was moved"); }); });    
 
  
 
  
 
  
 
 Toggle   

编辑： –

小提琴链接