jsPlumb：无法在充当 jsPlumb 源/目标的 div 内的 div 上单击（）答案

【问题标题】：jsPlumb: Can't click() on a div inside a div that acts as a jsPlumb source/targetjsPlumb：无法在充当 jsPlumb 源/目标的 div 内的 div 上单击（）
【发布时间】：2014-05-28 12:43:45
【问题描述】：

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

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

但是，每当我尝试使用 jsPlumb 将 .tasks 设置为 makeTarget/makeSource 时，它都会超过（可能不是最好的词）jQuery 完成的任何其他事件。那就是当我点击 .task 的 X 图标时，它的行为就像我点击 .task 本身并尝试创建 jsPlumb 的绑定一样。

可以在这里看到：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'
  });
}

【问题讨论】：

标签： javascript jquery jsplumb

【解决方案1】：

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

查看我的完整答案here。

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

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

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

【讨论】：

【解决方案2】：

如前所述，

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

此代码不起作用，因为您已将 '.task' 元素设为 jsPlumb 的 target 或 source 部分，因此鼠标事件将由 jsPlumb 处理，这会阻止这些元素的默认事件处理（jQuery 或纯 JS）。

在这种情况下，您需要创建一个小矩形 DIV（参考图像），用户可以从中拖动连接而不是整个 DIV。

【讨论】：