DataTables jQuery, Row details
 

Доброго дня!
Использую datatables jquery у себя в проекте. У них есть удобная фича Row details (https://datatables.net/examples/serv...w_details.html)
когда при нажатии на + в строке открывается контейнер. Я переписал под свои нужды и теперь при нажатии на details открывается еще один datatables. Во второй таблице я так же реализовал row details и хочу, чтобы при нажатии открывалась третья таблица, но почему-то не получается сделать события клика уникальными для каждой из таблиц. То есть при нажатии на детали во второй таблице, срабатывает обработчик сначала нужный мне, а потом для первой таблицы.
Собственно как сделать два этих события уникальными для каждой из таблиц?
Привожу примеры кода, спасибо.

Контейнер для первой таблицы

<table  id="contracts" class="display" cellspacing="0" width=""</table>

Инициализация первой таблицы + обработчик mainTable.on('click')

$(document).ready(function() {

        'use strict';
        mainTable  = $('#contracts').DataTable({
            "iDisplayLength": 100,
            "autoWidth": false,
            "language": {
                "emptyTable": "Ошибка загрузки"
            },
            "ajax" : {
                "url" : "Servlet",
                "dataSrc" : "tenants",
                "type" : "POST"
            },
            columns: [
                {
                    "targets": 0,
                    "data": null,
                    "defaultContent": "<input  id = 'redact' type='image' onchange='' style='width: 30px;height: 30px;' src='images/edit.png' name='delete'>"
                },
                { title: "Имя"},
                { title: "Фамилия" },
                { title: "ID" },

                {
                    "targets": 0,
                    "data": null,
                    "defaultContent": "<input  id = 'delete' type='image' onchange='' style='width: 30px;height: 30px;' src='images/delete.png' name='delete'>"
                },
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                }
            ],
            "order": [[ 1, "asc" ]],
            "columnDefs": [
                {"className": "dt-left", "targets": "_all"}
            ]
        });
        mainTable.on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = mainTable.row( tr );
            alert("ok contracts");
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('shown');
            }
            else
            {
                if ( mainTable.row( '.shown' ).length ) {
                    $('.details-control', mainTable.row( '.shown' ).node()).click();
                }
                var req = newXMLHttpRequest();
                var data = row.data();
                req.open("POST", "Servlet1", true);
                req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                req.send("id=" + data[3]);
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        });
    });

При нажатии на +(details) срабатывает функция с инициализацией второй таблицы.

Формируем div в который поместим нашу таблицу

 function format () {
        var d = document.createElement('div');
        d.className='div_one';
        document.body.appendChild(d);
        $('.div_one').append('<table  id="events" class="display" cellspacing="0" width="100%"></table>');
        $('.div_one').append('<button style = "float:right;">Добавить договор</button>');


        if(eventTable!=null)
            eventTable.destroy();
        
        eventTable  = $('#events').DataTable({
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                        $('td', nRow).css('background-color', '#879aa2');
            },
            "processing": true,
            "bLengthChange": false,
            "bFilter": false,
            "bInfo": false,
            "pagingType": "simple",
            "pageLength": 4,
            "paging": false,
            "autoWidth": false,
            "stateSave": true,
            "destroy" : true,
            "language": {
                "emptyTable": "Не загружено"
            },
            "ajax" : {
                "url" : "Servlet2",
                "dataSrc" : "data2",
                "type" : "GET"
            },
            columns: [
                { title: "1", visible: false },
                { title: "2" },
                { title: "3" },
                { title: "4"},
                { title: "5" },
                { title: "6" },
                { title: "7"},
                { title: "8", visible: false},
                { title: "9"},
                { title: "10"},
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                }
            ],
            "columnDefs":
                [
                    {"className": "dt-center", "targets": "_all"}
                ]
        });

        Второй обработчик, срабатывает но затем вызывается обработчик 
        для первой таблицы...
        
        eventTable.on('click', 'td.details-control', function () {
            alert("ok events");
        });

        return document.getElementsByClassName("div_one");
    }

Вообщем необходимо, что бы

eventTable.on('click', 'td.details-control', function () {
            alert("ok events");
        });

вызывался только для таблицы eventTable.

Как удалить топик с неправильным названием? :(