使用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();