jsPlumb Connection 事件多次触发答案

【问题标题】：jsPlumb Connection event is triggering more than oncejsPlumb Connection 事件多次触发
【发布时间】：2023-03-19 00:23:02
【问题描述】：

我正在做一个项目。所以我在这里所做的是，在 jsPlumb 中，我在屏幕上动态加载 DIV 元素，当我尝试在任意 2 个元素之间建立连接时，连接事件触发的次数与动态加载的 DIV 元素的数量一样多屏幕，而我希望它只触发一次。

这是我上面描述的代码：

$('#container').dblclick(function(e) {
var newState = $('<div>').attr('id', 'state' + i).addClass('item');

var title = $('<div>').addClass('title').text('State ' + i);
var connect = $('<div>').addClass('connect');

newState.css({
  'top': e.pageY,
  'left': e.pageX
});

jsPlumb.makeTarget(newState, {
  anchor: 'Continuous'
});

jsPlumb.makeSource(connect, {
  parent: newState,
  anchor: 'Continuous'
});

newState.append(title);
newState.append(connect);

$('#container').append(newState);

jsPlumb.draggable(newState, {
   containment: 'parent'
});

jsPlumb.bind("connection", function (info, originalEvent) {

        alert(info.sourceId);
}); 
i++;

jsPlumb.bind() 中的事件连接触发了多次。

【问题讨论】：

标签： jquery jsplumb

【解决方案1】：

我遇到了类似的问题，并且能够通过在设置每个可拖动 div 元素的循环之前和之外移动 jsPlumb.bind 侦听器来解决它。例如，我有一个 configureTool 函数，它会为我想要使其可拖动的每个 div 元素调用：

$('.display > .draggableTool').each(function(idx) {
    configureTool($(this));
}

在 configureTool 函数中，我设置了 jsPlumb 元素：

function configureTool($el) {
     /* initialize jsPlumb draggable elements */
    jsPlumb.draggable($el, {
        containment:"parent"
    });

    /* set up source and give it parameters to work with */
    jsPlumb.makeSource($el, {
        /* parameters.... */
        }
    });

    /* initialise all elements with '.draggableTool' class as connection targets */
    jsPlumb.makeTarget($el, {
        anchor:"Continuous"
    });

    /* move jsPlumb.bind("connection", function()) before configureTool loop */
}

通过在调用configureTool 函数的循环之前移动连接侦听器，我能够修复额外的事件触发器。所以它最终看起来像这样：

jsPlumb.bind("connection", function(info, originalEvent) {
    alert(info.sourceId);
});

$('.display > .draggableTool').each(function(idx) {
    configureTool($(this));
});

希望我能理解您的问题，这对您有所帮助。

【讨论】：

【解决方案2】：

是的，添加

     instance.bind("connection", function(info) {

            alert(info.sourceId);

        });

在循环之外是解决方案。

【讨论】：