JQuery - How to implement event listener for dynamically added droppable table rows?

Question

I got an editable table where you can add rows dynamically with a button, but I cant drop my draggable stuff into the new rows even if they have the droppable-Selektor. I tried to fix it with delegate and droppable() for the new rows but failed. Any tips or ideas?

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

Answer 1

You have to add .droppable(options) to your new row.

In order to make it work, I added a class to you new row :

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

And now add the droppable to this newRow (and finally remove this new useless class) :

$(".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");

Of course you can simplify param you add creating a new var for this.

FIDDLE

Hope it helps