using HTML in labels
HTML
<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<strong>click on the connection</strong>
<div id="console"></div>
<div class="d" id="d1">1</div>
<div class="d" id="d2">2</div>
CSS
.d {
position:absolute;
width:2em;
height:2em;
border:1px solid black;
z-index:1;
}
._jsPlumb_connector {
z-index:0;
}
._jsPlumb_endpoint {
z-index:2;
}
/* endpoint sits above nodes and connectors */
#d1 {
top:150px;
left:50px;
}
#d2 {
top:150px;
left:240px;
}
JavaScript
jsPlumb.ready(function () {
jsPlumb.draggable($(".d"));
var c = jsPlumb.connect({
source: "d1",
target: "d2"
});
c.bind("click", function () {
var conns = jsPlumb.getAllConnections();
$("#console").html(conns.length);
});
});