Question

我有一个可编辑的表格，您可以使用按钮动态添加行，但即使他们有droppable-Selektor，我也无法将可拖动的内容放入新行中。我尝试使用委托和droppable()修复新行，但失败了。任何提示或想法？

Here is my Code: http://jsfiddle.net/gM3bF/7/

Answer 1

您必须将.droppable(options)添加到新行。

为了使它工作，我在你的新行中添加了一个类：

var newtr = $('<tr />', { class: 'sortable-row ui-droppable newRow' });

现在将droppable添加到此newRow（最后删除这个新的无用类）：

$(".newRow") .droppable( {
        revert: true,
        drop: function (event, ui) {

            var id = ui.draggable.prop('id');
            if (id == "blurk") { var content = blurkContent(); };
            var title = $(event.target).closest('tr').children()[2];
            $(title).html(unescape(content[0]));
            var description = $(event.target).closest('tr').children()[3];
            $(description).html(unescape(content[1]));
            var link = $(event.target).closest('tr').children()[4];
            $(link).html(content[2]);
            var thumbnail = $(event.target).closest('tr').children()[5];
            $(thumbnail).html(content[3]);

        }
} )
$(".newRow").removeClass("newRow");

当然，你可以简化为你添加创建新变量的参数。

<强> FIDDLE

希望有所帮助

Answer 2

使用：

$(document).on(eventName, selector, function);

用法：

$(document).on('click', 'input.addButton', function(){ alert('clicked'); });

$(document).on('dblclick', '#editableTable td', function(){ alert('td clicked'); });

$(document).on('click', '#editableTable input.deleteButton', function(){ alert('delete clicked'); });

您可以在文档就绪事件处理程序中声明一次。

然而，

如果你动态添加了可拖动元素，请务必在之后调用{/ 1}} 将它们添加到DOM中。

希望有所帮助。

JQuery - 如何为动态添加的可放置表行实现事件侦听器？

2 个答案: