javascript - 通过单击按钮在元素内添加 div

Question

我在表格内有一个可拖动的 div(使用 jqueryui 插件)。我可以拖动单个 div 并将其包含在 <td id=” middle-side”></td> 内。现在，我在尝试创建额外的 div 时遇到问题，这些 div 也可以拖动并包含在 <td id=” middle-side”></td> 中。 。我用来附加这个新 div 的按钮对点击没有反应。我如何才能将新的 Dragagble div 添加到 <td id=” middle-side”></td> ？ JSFIDDLE

HTML

<td class="middle-side">
                Keep me inside here!
                    <div class="draggable" class="ui-widget-content">
                        <p><b>Drag me around</b></p>
                    </div>

            </td>

Jquery

//To Drag
$(function() {
     $( ".draggable" ).draggable({ containment: "parent" });
});


//To Add New Div
var i = 0;
var remove = true; // added this 
$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('draggale').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
    i++;
});

$('.middle-side').on('click','.draggable',function (){ // corrected spelling
    if(remove){
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

Answer 1

您可以将 div 作为模板存储在 .click 函数中:

$('#button').click(function(e) {
    $('<div class="draggable" class="ui-widget-content"><p><b>Drag me around</b></p></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
});

更新的 fiddle :http://jsfiddle.net/0wbnud4k/3/