如何將圖標添加到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中的連接？

回答

相關問題