如何将图标添加到 jsplumb 中的连接？

Question

我在想办法给连接添加图标。这就是我打算做的：

当用户将鼠标悬停在连接上时，应该会出现一个垃圾桶图标above/below 连接
当用户点击它时，它应该删除那个连接

现在，要将垃圾桶图标添加到连接中，我使用以下代码添加一个 connectorOverlay。

["Custom",{create:function(component){ 
  return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
  },location:0.5
}]

我正在尝试向图标添加事件以在点击后删除连接

$('.delete-connection').click(function(){
  //jsplumb.detach code goes here
})

但是调用的是连接点击事件，而不是图标事件。

根据建议的答案，我尝试了以下代码：

</p> <pre><code>$(document).on('click','.delete-connection',function(){ console.log('hit') //detach connection code goes here });

如果我在代码中犯了错误，请纠正我。

问题的 jsfiddle link：jsfiddle.net/cipher42/p9gdc4vm

Answer 1

连接是动态创建的，因此，当您将点击处理程序附加到删除图标覆盖时，覆盖可能不会出现在 DOM 中。

尝试按如下方式附加点击处理程序：

$(document).on('click','.delete-connection',function(e){
  //detach the connection here
});

问题中的 fiddle 不起作用的原因有很多。

覆盖 <img> 标签没有 delete-connection class。给叠加 class 的正确属性是 cssClass.

["Custom", {
    create: function (component) {
        return $('<img style="display:block;" src="https://lh6.ggpht.com/5I4BgwoxVAZH5vcPXwdjuNQ6Ellx9YCGgOYif7o2rMwJ2X7sCV96CqXy3OG4XCfwwhGm2C4=w20">');
    },
    location: 0.5,
    cssClass: 'delete-connection'
}]

fiddle 在 jsPlumb.animate 上抛出错误，因此，点击处理程序一开始就没有附加。

这是一个有效的 fiddle ：http://jsfiddle.net/nitincool4urchat/p9gdc4vm/9/

参考文献：

http://api.jquery.com/on/

Answer 2

我们可以这样添加事件：

                ["Custom", {
                    create: function (component) {
                        return $('<img style="display:block;background-color:transparent;" src="img/delete.png">');                     
                    },
                    location: 0.5,
                    cssClass: 'delete-connection',
                    events:{
                        click:function(params) {
                            alert("hello!");
                        }
                    }
                }]

如何将图标添加到 jsplumb 中的连接？

How to add icon to a connection in jsplumb?

jsplumb