Datatables, how to bind event on all rows of the t

Question

My datatable is working fine except the fact that i am trying to add a dblclick functionality on each row, which that works partially.

So, this is my code:

oTable = $('#example').dataTable({
    "aaSorting": [[ 1, "desc" ]],
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
});

/* Add a click handler to the rows */

//This highlights the row selected
$("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
});

//this attaches a dblclick event on the row
$("#example tr").dblclick(function() {
        var iPos = oTable.fnGetPosition( this );
        var aData = oTable.fnGetData( iPos );
        var iId = aData[1];
        $('#edit'+iId).click(); //clicks a button on the first cell
});

The highlighting of rows is ok for all rows of the tables, but the dblclick is working ONLY for the rows that where initially rendered in the first page. When I sort/search data and the data displayed change, the dblclick event does not work for those rows that where not displayed in the first page.

Can anyone help to solve this mystery? Thanks

Answer 1

The first answer is near perfect, but has to have one little tweak that stops it from working.

As in the jquery apidoc on() you have to add the [, selector ] as i did below with the "tr"

$("#example").on("dblclick", "tr", function() {
        var iPos = oTable.fnGetPosition( this );
        var aData = oTable.fnGetData( iPos );
        var iId = aData[1];
        $('#edit'+iId).click(); //clicks a button on the first cell
});

Answer 2

try this

  $("#example tbody").on("click",function(event) {
        $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
});


  $("#example tr").on("dblclick",function() {
            var iPos = oTable.fnGetPosition( this );
            var aData = oTable.fnGetData( iPos );
            var iId = aData[1];
            $('#edit'+iId).click(); //clicks a button on the first cell
    });

we can use events directly on the data which will load when the page is loading.Othersise we need to use on.

Answer 3

in case you need a different but similar scenario to bind to all specific classes inside datatable see below sample

$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler);

also consider following official doc about this issue:

One of the best ways of dealing with this is through the use of delegated events with jQuery's on method

https://datatables.net/examples/advanced_init/events_live.html