jsPlumb: fire failed for event click : TypeError: outthis.jsPlumb.detach is not a function
时间: 2024-02-22 14:58:05 浏览: 22
出现 `TypeError: outthis.jsPlumb.detach is not a function` 错误,可能是因为代码中调用了不存在的 `detach` 方法,或者 `jsPlumb` 实例未正确初始化。
你可以先检查一下代码中是否正确调用了 `jsPlumb.getInstance()` 方法来获取 `jsPlumb` 实例,如果没有获取到实例,那么调用 `detach` 方法时就会出现上述错误。
如果已经正确获取了实例,那么可能是因为 `jsPlumb` 版本不兼容或者代码中调用的方法与 `jsPlumb` 版本不匹配导致的错误。你可以查看一下当前使用的 `jsPlumb` 版本,并参考对应版本的官方文档来使用相应的方法。
另外,如果你要删除的是一个连接,可以使用 `instance.deleteConnection` 方法,而不是 `detach` 方法。示例代码如下:
```html
<div id="container">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="delete-line" data-id="line1">Delete Line 1</div>
<div class="delete-line" data-id="line2">Delete Line 2</div>
</div>
<script>
// 初始化 jsPlumb 实例
const instance = jsPlumb.getInstance();
// 连接两个元素
instance.connect({
source: 'item1',
target: 'item2',
anchors: ['Right', 'Left'],
endpoint: ['Dot', { radius: 5 }]
});
// 给删除按钮绑定点击事件
const deleteButtons = document.querySelectorAll('.delete-line');
deleteButtons.forEach(btn => {
btn.addEventListener('click', () => {
const lineId = btn.dataset.id;
instance.deleteConnection(lineId); // 删除连线
});
});
</script>
```
在上面的示例中,我们使用了 `instance.deleteConnection` 方法来删除连接,而不是 `detach` 方法。