javascript - jquery数据表插件问题

Question

我正在使用 jquery 数据表并改编了以下示例

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

此代码的输出显示在此处 http://www.datatables.net/examples/api/row_details.html在每行的子行中，我添加了一个输入框和一个按钮，我想在其中处理用户的输入。例如，我想获取用户的输入并构建一个将打开一个新窗口的链接。但是，我在文档中找不到与数据表库中行的子级相关的事件？例如，我想做类似的事情

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

上面的 id“butt”是一个按钮，它是行子项的一部分。换句话说，我想操作子行中的元素，而不是行本身。

Answer 1

由于 datatables 将元素添加到 DOM，因此您必须使用委托(delegate)进行选择，例如:

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

它不一定是 body，但您需要一个不会动态添加到 DOM 的元素以供 jQuery 使用。

此外，ID 应该是唯一的，因此您不会希望向每一行添加具有相同 ID 的按钮。如果您需要添加多个按钮，您需要使用一个类，绑定(bind)到具有该类的元素，然后处理每个按钮以获得适当的上下文。