After a jquery clone() the select extensión does´t work

ramirobrescia

http://live.datatables.net/roceveki/2/edit?html,js,output

Hello.

I´m doing a delivery app (deliver = entrega in the example) where we can add products to distinct "entregas", for each "entrega" has one DataTable instance. Use the select extension.

In the example the select.dt deselect.dt does´t work, but if initialize only the template in the dom.ready the select extension work fine (uncomment initTablaEjemplo() in document.ready.

To add "entregas" click on button "Add Entrega". If init the table tamplate the "Add Entrega" don't work, but that is correct, comment initTablaEjemplo() in document.ready.

Then the code, to do that I have a HTML template (#entrega-x) wich clone via jquery, make this unique replacing x for a number in the id attr and the same thing with his x childs.

var entrega = {
    dom: $('#entrega-x').clone(true,true),
    origen: null,
    destino: null,
    materiales: null,

    // rest of the code...
};

Then make a .DataTable()

// DataTable de los materiales para la entrega-i
entrega.materiales = entrega.dom.find('#entrega-x-materiales-tabla').attr('id', 'entrega-' + i + '-materiales-tabla');

// Inicialización de la tabla de carga de materiales
entrega.materiales = entrega.materiales.DataTable({....

Then add the event listeners ...

// Eventos de selección materiales en el DataTable
entrega.materiales.on('select.dt', entrega, tablaMaterialesSelectHandler);
entrega.materiales.on('deselect.dt', entrega, tablaMaterialesSelectHandler);

Thanks for the time.
Ramiro

kthorngren

You need to call $('#entregas-list').prepend(entrega.dom); before initializing Datatables so the select event listeners can be applied to the table in the DOM. I updated the example by moving that statement above the Datatables init code.
http://live.datatables.net/lekiqoyu/1/edit

Kevin

ramirobrescia

WOW I love you! Espectacular!

I tryed a lot of things over 4 hours, then with 1 more hour write post (call 911).

Thanks!
Ramiro