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

Question

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

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

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

如下所示:http://jsfiddle.net/9yej6/4/

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

$("#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 标记)相关的操作。