Jquery动态创建的droppable元素不起作用

Question

嗯，大家好，我开发了一个页面来创建表单拖放，但是我遇到了内部元素丢失的问题，例如：

<div class="container">
   <div classs="row"> <! - I drop here -!> </ div>
   <- Content is dropped here! : '(-!>
</ div>

这是我的Javascript：

        $(document).ready(function(){

                $( "#a .row-element" ).draggable({ 
                    revert: "invalid",
                });

                $(  "#a .span2-element" ).draggable({ 
                    revert: "invalid",
                });

                $(".row").droppable({
                    accept: '.span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="span2"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });

                $(".container").droppable({
                    accept: '.row-element , .span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="row"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });
        });

在我看来，新创建的元素不是dropavel ......：/

有什么建议吗？！先感谢您！

Answer 1

首先，请确保您的HTML代码为：

<div class="container">
   <div class="row"></div>
</div>

然后，你为什么要：

$('<div class="span2"></div>"').appendTo(this);

你应该：

 $('<div class="span2"></div>').appendTo(this);