Adding click events to Datatables

问题:

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

回答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 i.e. 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.

回答2:

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>

回答3:

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())
            });
        }
});

回答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')
});

回答5:

Try it:

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