Question

我正在开展一个项目。所以我在这里做的是在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()中的事件连接不止一次触发。

Answer 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));
});

希望我理解你的问题，这有一些帮助。

Answer 2

是添加

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

            alert(info.sourceId);

        });

在循环之外的

是解决方案。

jsPlumb连接事件不止一次触发

2 个答案: