javascript - jsPlumb:无法在充当 jsPlumb 源/目标的 div 内的 div 上单击()

Question

我正在使用 jsPlumb .
我当前的功能允许我创建一个 .project div，然后可以在其中包含 .task div。 .project div 有 3 个可点击的按钮，它们都使用 jQuery 和 .task 中的 .project 有一个关闭按钮，它也有效。

我们可以在这里看到:http://jsfiddle.net/9yej6/3/
(单击添加项目按钮，然后单击绿色项目并尝试单击某些任务附近的 X - 应弹出一个警告)

但是，每当我尝试使用 jsPlumb 使 .task 成为 makeTarget/makeSource 时，它超越(可能不是最好的词)任何jQuery 完成的其他事件。也就是说，当我点击 .task 的 X 图标时，它就像我点击 .task 本身一样，并尝试创建 jsPlumb 的绑定(bind)。

在这里可以看到:http://jsfiddle.net/9yej6/4/

因此以下行不再有效(请注意我正在使用 on() 函数，因为 .project/.task div是动态创建的):

$("#container").on('click','.task .close',function(e) {
  alert('a task`s add was clicked');
});

最初 addTask() 函数是(有效，但您不能添加 jsPlumb 键):

function addTask(parentId, index) {
  var newState = $('<div>').attr('id', 'state' + index).addClass('task');

  var close = $('<div>').addClass('close');
  newState.append(close);

  var title = $('<div>').addClass('title').text('task ' + index);;
  newState.append(title);

  $(parentId).append(newState);
}

但是当我向它添加 makeTarget()/makeSource() 调用时，它似乎超越了任何其他 jQuery 事件处理。我的新 addTask() 函数变为:

function addTask(parentId, index) {
  var newState = $('<div>').attr('id', 'state' + index).addClass('task');

  var close = $('<div>').addClass('close');
  newState.append(close);

  var title = $('<div>').addClass('title').text('task ' + index);;
  newState.append(title);

  $(parentId).append(newState);

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

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

Answer 1

您还可以使用 filter 参数来指定对象拖动要包含的元素。

查看我的完整答案 here .

http://jsplumbtoolkit.com/doc/connections.html#sourcefilter

jsPlumb.makeSource("foo", {
  filter:":not(a)"
});

上面的意思是，不要干扰与a( anchor 标签)相关的操作。