Livewire events and datatables

Hi all,

I’m developing a datatable which needs rows for general info and details for each row in a onclick row event. The idea is when you click on a row, I’ve got a JS onclick listening and firint an emit livewire for a specific action on my component.

The problem is, when clicking on a row, event is fired but row collapse and uncollapse. Here is my code:

(function ($) {
    'use strict';
    // Initialize a dataTable with collapsible rows to show more details
    var initDetailedViewTable = function() {

        var _format = function(d) {
            // `d` is the original data object for the row
            return '' +
                '<tr class="row-details">' +
                'Here I want row details composed by returned data from emit event' +
        var table = $('#detailedTable');

            "sDom": "t",
            "scrollCollapse": true,
            "paging": true,
            "bSort": true

        // Add event listener for opening and closing details
        $('#detailedTable tbody').on('click', '.data-row', function(d) {
            var contId = this.getAttribute('data-contract-id');
            window.livewire.emit('showServices', contId);

            if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) {
            var tr = $(this).closest('tr');
            var row = table.DataTable().row(tr);