Adding click events to Datatables

Question

Here is my Jquery data tables to get the values from ajax and placing it.

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "data/arrays.txt"
    });
});

Here is the constructed table.

I want to write click function to it. How can i do it ?

<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;">
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1">TMB030</td>
            <td>Sample Collected</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">TMB033</td>
            <td>Sample Collected</td>
        </tr>
    </tbody>
</table>

I want to write click event to the role="row" and get the value TMB030 on it.

How can i do that ?

I tried like this

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "myOrders/" + Cookies.get('userSession')
    });
    $("div[role='row']").click(function() {
        alert('clicked')
    });
});

But it is not triggered how can i do that ? Help pls

Answer 1

It should be like this:

$( document ).on("click", "tr[role='row']", function(){
    alert($(this).children('td:first-child').text())
});

Brief Explanation: First of all there is no element exists in DOM on which you are applying click event ie div[role='row'] . Secondly, you have to dynamically bind click event, because the time you bind click event, DataTable was not fully loaded and there were no such element existed yet on which you are applying click event.

Answer 2

If you are loading your Table by ajax, maybe would be better use the function "initComplete" of dataTable, then you could bind events to any element in the table when you are totally sure of all rows are present.

$('#example').DataTable({
    "ajax": "myOrders/" + Cookies.get('userSession'),
    "initComplete": function () {
            $( document ).on("click", "tr[role='row']", function(){
                 alert($(this).children('td:first-child').text())
            });
        }
});

Answer 3

Change your click to this:

 $( "tr[role='row']" ).on("click",function(){
     alert($(this).find("td:first-child").text());
});

Sample:

 $(document).ready(function() { $("tr[role='row']").on("click",function() { alert($(this).find("td:first-child").text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;"> <tbody> <tr role="row" class="odd"> <td class="sorting_1">TMB030</td> <td>Sample Collected</td> </tr> <tr role="row" class="even"> <td class="sorting_1">TMB033</td> <td>Sample Collected</td> </tr> </tbody> </table> 

Answer 4

.click event will not bind on dynamic elements, In your case rows will be loaded after ajax call.

So change code to below

$("tr[role='row']" ).on('click', function(){
  alert('clicked')
});

Answer 5

Try it:

$( document ).on("click", "#example tr[role='row']", function(){
       alert($(this).children('td:first-child').text())
});