使用 jQuery 添加一个 div，然后通过 jsPlumb 连接它

Question

我是第一次使用 jsPlumb，希望能得到一些帮助。

我的应用程序允许用户通过单击按钮创建一个“气球”（一个 div），然后使用 jsPlumb 将一个字符串从气球绘制到一个“句柄”（另一个 div）。

如果我删除 .show 效果，以下代码可以在我的浏览器 (FF) 上运行，但如果我包含 {effect: "scale", percent: "100"}，连接器会被绘制，然后立即消失。

HTML：

<div id="my_window">
  <div id="my_balloons">
    <div id="my_handle"></div>
  </div>
  <div id="my_buttons">
    <div class="button">Make a balloon</div>
  </div>
</div>

CSS：

#my_balloons {
  height: 400px;
  position: relative;
}

#my_handle {
  background-color: red;
  height: 10px;
  width: 10px;
  position: absolute;
  left: 42%;
  top: 90%;
}

.button {
  background-color: #2460a4;
  border-radius: 0.9em;
  color: #fff;
  cursor: pointer;
  margin: 1em 0;
  padding: 0.3em 1em;
  text-align: center;
  width: 7em;
}

.balloon {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  text-align: center;
  cursor: move;
  width: 100px;
  height: 125px;
}

JS：

jsPlumb.ready(function() {

  jsPlumb.on(document, "click", ".button", function() {

    var balloon = '<div id="my_balloon" class="balloon hide">Balloon!</div>';
    $('#my_balloons').prepend(balloon);
    $('#my_balloons .balloon').show({
      effect: "scale",
      percent: "100"
    });

    jsPlumb.connect({
      source: "myBalloon",
      target: "my_handle",
      anchors: ["BottomCenter", "TopLeft"],
      endpoint: "Dot"
    });


  });

});

Answer 1

您可以使用

添加一个部门

 $("#container").on('click', '.btnClass', function (e) {   
     var balloon = $('<input>').attr('type', 'text');
     balloon_parent.append(balloon);

}

这里，容器是气球的父画布。 然后您可以使用此输入并将其作为文本添加到您的句柄 div。 为了从气球 div 获取输入，还应包含以下代码

balloon.keyup(function(e) {
            if (e.keyCode === 13) {
                $(this).parent().text(this.value);
            }
        });
        balloon.focus();