Question

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

我的问题如下......

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

我遇到的问题是剑道无法识别新内容。我尝试使用这样的代码，它允许我在动态加载后拖动内容，但是它不允许我将其拖放到另一个动态加载的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");
         }
     });
});

动态生成的draggable 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上编写代码时出错了）

Answer 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");
       }
    });

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

1 个答案: