{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 该账号已被封号 的问题《Increase in number of divs, while using jsPlumb》','https://www.manongdao.com/q-1011851.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have created three div elements in an HTML page, each of these 3 div elements contain a text box i.e. an input element in it. One div, is made a source while other two are made target. The HTML page has a button name toggle.
The initial connection between source div and one of the target div is created with the help of drag and drop. When toggle is clicked, it will remove the connection between the source and the target, and will create the new connection between source and the other target. Now, when performing analysis using google chrome developer tools over this scenario, the number of div elements keep on increasing by 2 for every toggle.
<!DOCTYPE html>
<html>
<head>
<title>
jsplumb_demo
</title>
<script src="./dist/libs/jquery.js"></script>
<script src="./src/jquery-ui.min.js"></script>
<script src="./src/jquery.jsPlumb-1.7.6-min.js"></script>
<script>
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");
});
});
</script>
</head>
<body>
<div id="container">
<div class="source" id="source" style="position: absolute;left: 200px" >
<input/>
</div>
<div class="target" id="target" style="position: absolute;left: 600px" >
<input />
</div>
<div class="target1" id="target1" style="position: absolute;left: 600px; top:200px" >
<input />
</div>
</div>
<button name="delete" type="button" onclick="connectionDelete()">Toggle</button>
</body>
</html>
Edit :-