Question

我试图找出如何为连接添加图标。这就是我打算做的事情：

当用户将鼠标悬停在连接上时，应在连接上方/下方显示垃圾桶图标
当用户点击它时，它应该删除该连接

现在，要将垃圾桶图标添加到连接，我使用以下代码添加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
})

但它正在调用连接点击事件而不是图标事件。

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



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

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

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

问题的jsfiddle链接：jsfiddle.net/cipher42/p9gdc4vm

Answer 1

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

尝试附加点击处理程序，如下所示：

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

为什么问题中的小提琴不起作用有很多原因。

重叠<img>标记没有delete-connection类。为叠加层提供正确属性的是cssClass。

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

小提琴在jsPlumb.animate＆amp;上投掷错误因此，点击处理程序从未首先附加。

这是一个工作小提琴：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中为连接添加图标？

2 个答案: