将 Kendo Web Draggable 绑定到动态生成的 div答案

【问题标题】：Bind Kendo Web Draggable to Dynamically generated div将 Kendo Web Draggable 绑定到动态生成的 div
【发布时间】：2014-03-16 02:43:53
【问题描述】：

过去几个小时我搜索了 Telrik 论坛和 Stackoverflow 论坛，但找不到解决问题的方法。

我的问题如下...

在加载网页时，我正在进行 ajax 调用以从数据库中获取数据，然后使用 javascript 动态加载该数据（在格式化、添加 div、表格等之后），然后我希望让 div 包含使用 kendo Web UI 库可拖放新生成的数据。

我遇到的问题是剑道无法识别新内容。我尝试使用这样的代码，它确实允许我在动态加载后拖动内容，但是它不允许我将其拖放到另一个动态加载的 div 上。

所以我想知道，有没有一种方法可以将事件与 kendo 绑定到动态生成的内容，而不是使用 jquery .on 事件？（下面的代码不允许将可拖动的 div 拖放到可拖放的 div 上）。

如果您需要更多信息，请告诉我，我会尽力提供。

$("#draggable-container").on("mouseover", '.available', function() {
    $(".available").kendoDraggable({
        hint: function(event) {
            return $("#" + $(event).attr("id")).clone();
        }
    });
});

$("#droppable-container").on("mouseover", '.vacant', function() {

    $(".vacant").kendoDropTarget({
         drop: function(e){          
            $("#" + e.dropTarget.attr("id")).toggle("clip");
         }
     });
});

动态生成的可拖动html如下所示。

<div id="draggable">
<div id="3" class="available">
    <table class="table twelve">
        <tbody>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>08:00:00 - 2013-10-11</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>16:00:00 - 2013-10-11</td>
            </tr>
        </tbody>
    </table>
</div> 
</div>

dropable 动态生成的 html 如下所示。

<div id="dropable">
<div id="1" class="vacant">
    <table class="table twelve">
        <tbody>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>08:00:00 - 2013-10-11</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>16:00:00 - 2013-10-11</td>
            </tr>
        </tbody>
    </table>
</div> 
</div>

编辑：更改了类名（在 SO 上编写代码时出错）

【问题讨论】：

尝试使用 $("body").on("mouseover","#draggable-container.available", function() {});

标签： javascript drag-and-drop kendo-ui

【解决方案1】：

经过研究和进一步测试，我找到了解决问题的方法。

我希望这会帮助其他可能遇到相同问题的人。

    $("#drggable-container").kendoDraggable({
        filter: ".available",
        hint: function(event) {
            return $("#" + $(event).attr("id")).clone();
        }
    });


    $("#dropable-container").kendoDropTargetArea({
       filter: ".vacant",
       drop: function(e){          
           e.dropTarget.toggle("clip");
       }
    });

【讨论】：