Champ de composant dans l'objet de superposition retournant null après une opération de détachement jsplumb

Question

J'ai essayé de supprimer une connexion au passage de la souris et maintenant, je vérifie la connexion spécifique à supprimer au survol de la souris puis je la supprime en cliquant sur la superposition d'icônes de corbeille (L'icône de la corbeille apparaît sur la connexion au passage de la souris).

J'utilise le code suivant pour ajouter l'icône trash overlay:

plumb.bind("connection", function (info, originalEvent) { 
    var connection = info.connection; 
    var overlay = connection.addOverlay(["Custom",{ 
     create:function(){ 
      return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">'); 
     }, 
     location:0.5, 
     id:"delete-connection-new", 
     cssClass : "delete-connection" 
    }]); 
    overlay.setVisible(false); 
    connection.bind('mouseover',function(connection,originalEvent){ 
     overlay.setVisible(true); 
     scope.conn_del = connection; 
     console.log($scope.conn_del); 
    }); 
    connection.bind('mouseout',function(connection,originalEvent){ 
     overlay.setVisible(false); 
    }); 
} 

Pour supprimer la connexion que j'utilise le code suivant:

<code> 
$(document).on('click','.delete-connection',function(){ 
      console.log(conn_del.component); 
      plumb.detach(conn_del.component); 
     }); 
</code> 

Lorsque je supprime la connexion, mais ne sauvegardons pas les organigramme et je reviens au même organigramme, le conn_del.component est retourné comme nul quand il y a une connexion existante.

Je vais ajouter le jsfiddle pour le même bientôt. Toute aide à cet égard serait vraiment appréciée.

Answer 1

Ajout du code de gestionnaire d'événements, cliquez ci-dessous dans la définition de superposition fixerait la question:

var overlay = connection.addOverlay(["Custom",{ 
       create:function(){ 
         return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">'); 
        }, 
        location:0.5, 
        id:"delete-connection-new", 
        cssClass : "delete-connection", 
        events:{ 
         click:function(connection,originalEvent){ 
          plumb.detach(connection.component); 
         } 
        } 
      }]);