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

Question

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

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

下面的代码在我的浏览器（FF）上工作，如果我删除.show效果，但如果我包含{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();