button click not firing from datatable row

Question

I'm using Datatables to display data in a table and I'm trying to create a button for each row and catch click event using columns.render.

I created the button using JQuery and tried to add a click event which doesn't seem to be working

I know there are other methods to do this, but why this method doesn't work?

var dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
  ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
  ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];


$('#example').DataTable({
  data: dataSet,
  responsive: true,
  columns: [{
      title: "Name"
    },
    {
      title: "Position"
    },
    {
      title: "Office"
    },
    {
      title: "Extn."
    },
    {
      title: "Start date"
    },
    {
      title: "Salary"
    },
    {
      "render": function(data, type, row, meta) {

        var button = $('<button/>', {
          html: "Click!"
        });

        button.click(function() {
          alert("Click event working");
        });

        return button[0].outerHTML;
      }
    }

  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" width="100%"></table>

Rory McCrossan · Accepted Answer · 2018-04-24 10:02:07Z

5

The issue is because the render logic is building a new element from the string you provide. This means that, although you attach a click handler to the element, it's lost as the jQuery object is not used to append the new content.

To fix this, you can use a delegated event handler on the button elements:

var dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
  ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
  ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];

$('#example').DataTable({
  data: dataSet,
  responsive: true,
  columns: [
    { title: "Name" }, 
    { title: "Position" }, 
    { title: "Office" }, 
    { title: "Extn." }, 
    { title: "Start date" }, 
    { title: "Salary" }, 
    {
      "render": function(data, type, row, meta) {
        return '<button data-name="' + row[0] + '">Click!</button>';
      }
    }
  ]
});

$('#example').on('click', 'button', function() {
  console.log($(this).data('name'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" width="100%"></table>

answered Apr 24, 2018 at 10:02

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chiller Over a year ago

Thanks for the clear answer :), i guess if it is building a new element then the event will be lost.

MocXi Jan 2 at 12:51

This worked for me! Thanks.

Collectives™ on Stack Overflow

button click not firing from datatable row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related