jquery datatables plug-in issue

Question

I am using jquery datatables and adapted the following example

        /* Formatting function for row details - modify as you need */
    function format ( d ) {
     // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>Full name:</td>'+
        '<td>'+d.name+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extension number:</td>'+
        '<td>'+d.extn+'</td>'+
    '</tr>'+
    '<tr>'+
        //IMPORTANT PART
        '<td>' + '<input type="text" id="inp">' + '</td>'+
        '<td>' + '<button id="butt">' + 'click' + '</button>' + '</td>'+
    '</tr>'+
  '</table>';
 }

     $(document).ready(function() {
     var table = $('#example').DataTable( {
    "ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" }
    ],
    "order": [[1, 'asc']]
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
       } );
 } );

The output of this code is shown here http://www.datatables.net/examples/api/row_details.html In the row child for each row I've added an input box and a button from where I want to handle the input of the user. For instance, I would like to take the input of the user and construct a link which will open a new window. However, I could not find in the documentation events related to children of the rows in the datatables library? For example, I would like to do something like

     $('#example tbody').on('click', '#butt', function () {
           //do something
     });

the id 'butt' above is a button which is part of the row child. In other words, I would like to manipulate the elements in the row child, not the row itself.

Answer 1

Since datatables adds the element to the DOM you'll have to use a delegate for selection, something like:

$('body').on('click', '#example tbody #butt', function () {
    //do something
});

It doesn't necessarily have to be body , but you'll need an element that is not dynamically added to the DOM for jQuery to use.

Also, ID's should be unique, so you won't want to add a button with the same ID to every row. If you need to add multiple buttons you'll want to use a class, bind to the elements with that class, and then handle each one to get the appropriate context.