Ich kann das Bild nicht auf den jsPlumb-Endpunkt setzen

Question

Ich benutze die jsPlumb-Bibliothek in meinem Projekt und ich habe eine Funktion, die Endpunktzeichnungen ändert, wenn sie verbunden sind. Ich rufe es, wenn die Seite geladen wird, und alles funktioniert gut, aber wenn ich es beim Verbindungsereignis anrufe, passiert nichts. Hier ist mein Code:

function changeEndpointImage(){ 
      var elem = $('.tableBody'); //These are my connectable elements 
      for(var i=0;i<elem.length;i++) 
      { 
       var eps=jsPlumb.getEndpoints($(elem[i])); //Getting endpoints for each of the connectable elements 
       for(var j=0;j<eps.length;j++) 
       { 
         if(eps[j].connections.length!=0) //Checking if any of them have connections 
          eps[j].setImage("images/styled_radiobutton.png"); //Setting another image 
       } 
      } 
     } 
jsPlumb.bind("connection", function(connection) { 
    changeEndpointImage(); 

    //I have also tried this method commented below, but nothing. 
    //connection.sourceEndpoint.setImage("images/styled_radiobutton.png"); 
    //connection.targetEndpoint.setImage("images/styled_radiobutton.png"); 

}); 

Ich versuche auch Endpunkt Bilder zurück auf den ersten Blick zu ändern, wenn die Verbindung gelöst ist, aber in diesem Fall nur der Quellendpunkt geändert wird, Ziel bleibt das gleiche:

jsPlumb.bind("connectionDetached", function(connection) { 
    connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png"); 
    connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png"); 
}); 

Was fehlt mir oder wie kann ich dieses Problem beheben?

EDIT: Hier ist jsfiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/

Ziehen wenige Artikel auf der rechten Seite div, drücken Sie "Neuen Link" und versuchen, Verbindungen zu befestigen lösen. Sie werden sehen, dass sich die Endpunkte nicht ändern.

Answer 1

Ich fand eine Lösung in jsPlumb Google-Gruppe. Ich habe den Endpunkt Blank anstelle von Image gesetzt, die cssClass: 'myClass' Eigenschaft hinzugefügt und dann .myClass { background: url(...) } gestylt. Das macht, was ich wollte, weil verbundene Endpunkte zusätzliche Klasse 'jsplumb-endpoint-connected' bekommen und ich kann ein anderes Bild als Hintergrund für diese Klasse setzen.