Добавление div с помощью jQuery, затем подключение его через jsPlumb

Question

Я использую jsPlumb в первый раз и буду признателен за некоторую помощь с ним.

Мое приложение позволяет пользователю создавать «воздушный шар» (div) одним нажатием кнопки, а затем рисует строку с воздушного шара на «дескриптор» (другой div) с помощью jsPlumb.

Следующий код работает в моем браузере (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();