javascript - JQuery DataTables: Show/hide row details with multiple tables -

i'm aware there's similar question on here jquery datatables: how show/hide row details multiple tables? doesn't apply current problem completely.

i have code:

var otable = $('.datatable').datatable( {     "aocolumndefs": [      { "bsortable": false, "atargets": [ 0,3,4 ] },      { "bvisible": false, "atargets": [ 4 ] }     ],       "aocolumns": [       null,       null,       null,       null,       { "stype": "html" }     ],         "aasorting": [[1, 'asc']],     "bfilter": false,     "bpaginate": false,     "fninitcomplete": function(osettings) {       /* add event listener opening , closing details       * note indicator showing row open not controlled datatables,       * rather done here       */      $('.datatable tbody td img').live('click', function () {          var ntr = this.parentnode.parentnode;           if (otable.fnisopen(ntr)) {            // row open - close            this.src = "css/images/details_open.png";            otable.fnclose(ntr);          } else {            // open row            this.src = "css/images/details_close.png";            otable.fnopen(ntr, fnformatdetails(otable, ntr), 'details');          }           } );               } }); 

that works if there's 1 if add datatable class second table, work datatables show/hide buttons fail in both tables. both tables have same count of fields , content, sake of making work, still no success.

on similar post, person suggests adding:

tbl = $(this).parent().parent().datatable(); 

to click function have tried , didn't work.

what missing??

in short: rid of fninitcomplete, , move "live" call below datatable call.

as example, if have 3 tables, after each table completed, current code execute fninitcomplete method - fninitcomplete gets called 3 times. fninitcomplete uses selector "live" click event img, , selector "live" tables. results in multiple bindings. see jsfiddle, http://jsfiddle.net/kevwj/, duplicates method. (note i'm not using images capturing click on td cell, not image).

var otable = $('.datatable').datatable( {     "bfilter": false,     "bpaginate": false,     "fninitcomplete": function(osettings) {         $('.datatable tbody td').live('click', function () {              var ntr = this.parentnode;             alert(ntr);         } );               } }); 

if click on row in table, 3 alert boxes, because 3 tables created , each "live" click tables @ fninitcomplete.

to fix, remove fninitcomplete, , put code "live" after call datatable. should solve it. see jsfiddle: http://jsfiddle.net/rgmnu/ click on row in table , identify correct table class. again since capturing click on td, have this.parentnode.parentnode.parentnode. think you'll have level.

$('.datatable tbody td').live('click', function ()          {             var t = this.parentnode.parentnode.parentnode;             alert(jquery(t).attr('class'));         } );