Identify Which Label was Clicked in jsPlumb - jsplumb

Question

To manipulate labeled graphs, I think I need to add an additional property on each label of jsPlumb connections. For example, when I click on a connection label, even if source and target points can be deduced from label id (or attributes) I cannot know which type of edge was clicked.
Merely changing jsPlumb graph is not enough because there are underyling data structures represented by jsPlumb graphics. Codes using jsPlumb.ready and jsPlumb.bind are already well implemented and work fine.
var newConn = jsPlumb.connect({ source: from, target: to,
endpoint: epStyle, detachable: false,
anchor: "Continuous", connector: ["StateMachine", { curviness: 20}],
paintStyle: lineSt, hoverPaintStyle: lineHoverSt,
overlays: [
["Arrow", { width: 10, length: 10, foldback: 1, location: 0.25,
id: "arrow_" + from + to + 1}],
["Arrow", { width: 10, length: 10, foldback: 1, location: 0.75,
id: "arrow_" + from + to + 2}],
["Label",
{ label: relation.name, id: "label_" + from + to + rel_id, cssClass: "edgeLabel"}
// Any additional property here?
]
]
});
//Or add property here?
newConn.type = SOME_EDGE_TYPE;
jsPlumb.ready(function () {
jsPlumb.bind("click", function (c) {
jsPlumb.detach(c);
});
jsPlumb.bind("beforeDetach", function (conn) {
return confirm(
"Are you sure you want to disconnect ["
+ conn.sourceId + "=>" + conn.targetId + "]?");
});
});

Answer 1

You can bind an event jsPlumbConnection to get notified when a new connection is created:
jsPlumb.bind("jsPlumbConnection", function(ci) {
console.log(ci.connection);
console.log(ci.sourceId+" is connected to "+ci.targetId);
});
In order to manipulate jsPlumb connection refer API Document.
The ci(Connection Info.) object consists of following data:
connection - the newly established Connection.
source - the source element in the Connection
sourceEndpoint - the source Endpoint in the Connection.
sourceId - the ID of the source element.
target - the target element in the Connection.
targetEndpoint - the target Endpoint in the Connection.
targetId - the ID of the target element.