javascript - Adding click events to Datatables - Stack Overflow

admin管理员组

文章数量:1187852

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

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

• javascript
• php
• jquery
• html
• datatables

Share Improve this question Follow edited May 19, 2016 at 8:03 Krupesh Kotecha 2,41233 gold badges2222 silver badges4040 bronze badges asked May 19, 2016 at 7:38 SA__SA__ 44733 gold badges77 silver badges1313 bronze badges 1

• Should it not be tr[role='row']? – Sandeep Nayak Commented May 19, 2016 at 7:39

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 10

It should be like this:

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

Brief Explanation:

1. On initial page load(that is when document.ready callback function is executed), the Datatable elements (rows and columns etc) are not yet present in the DOM Tree. They are created at runtime in response to data changes. Therefor the callback function provided in document.click method will not get bind to any element (i.e. div[role='row']).
2. To overcome it, .on method is available. It binds the callback function to click event of elements already in the DOM and also to elements that are created dynamically.

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

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>

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

Try it:

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

本文标签： javascriptAdding click events to DatatablesStack Overflow