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

我想知道如何添加图标连接。这就是我打算做的事：如何将图标添加到jsplumb中的连接？

当用户将鼠标悬停的连接，一个垃圾桶图标应该出现以上/连接
下面当用户点击它，它应该删除该连接

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

删除上点击连接，但它被调用连接click事件，而不是图标的事件。

按照答案的建议，我尝试了下面的代码：

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

请纠正我，如果我做的代码错误。

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

来源

2015-08-18 cipher42

你检查的文档和演示？另外，你有什么尝试？ https://jsplumbtoolkit.com/docs.html https://jsplumbtoolkit.com/community/demo/flowchart/index.html –

也阅读 - http://stackoverflow.com/help/how-to-ask –

嗨，感谢您对这个问题表现出兴趣。现在，我使用自定义覆盖图来添加图标。我已经添加了在问题中使用的代码。我试图弄清楚如何将点击事件绑定到图标的类 – cipher42

连接是动态的，因此创建的，当你安装的单击处理程序的删除图标叠加的叠加可能不会出现在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 &抛出错误，因此，点击处理程序从未被摆在首位连接。

这里是工作提琴：http://jsfiddle.net/nitincool4urchat/p9gdc4vm/9/

参考文献：

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

来源

2015-08-19 17:49:30

嗨，我尝试在我的代码中使用这个。但仍然无法执行删除。我在评论中附上小提琴。 – cipher42

单击事件没有击中上述处理函数（我用console.log测试过它）。我在问题的详细信息中添加了点击处理程序。 – cipher42

如果您检查图像，它们不包含“delete-connection”类，因此点击不起作用。 –

我们可以添加这样的活动：

   ["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!"); 
         } 
        } 
       }]

来源

2017-08-08 07:27:38

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

回答

相关问题