ajax call on button click not working when responsive

X1pheR

Hi all,

First post and a beginner so hope anybody can help. :)
I build some datatables which rows contain some buttons. When the DT is not responsive I can click the buttons and it will load target url to a specified div. This works fine untill the DT becomes responsive when I view on a smaller viewport or resize window. If i then click the buttons it will just load target url as a new page. Hope anybody can help.

The buttons are for example:
<a href="mod/sfbe/env.ps1x?view=view&id=14" class="btn btn-primary btn-xs" data-sub="customer details" data-title="View" data-to=".content"><i class="fa fa-folder-open" aria-hidden="true"></i> View</a>

At the end of the page I load:

$(function () { $('.dataTable').DataTable({ responsive: true, autoWidth: false }); SetClickHandlers(); });

And SetClickHandlers is defined at first load:
function SetClickHandlers() {
$('[data-to]').off("click").on("click", function() {

    var $link = $(this);
    var $target = $(this).attr('data-to');

    // set vars
    var $headermain = $(".content-header h1 span");
    var $headersub = $(".content-header h1 small");

    $("li.active").removeClass("active");
    $(this).parent().addClass("active");

    $($target).load($link.attr('href'));
    $($headermain).text($link.attr('data-title'));
    $($headersub).text($link.attr('data-sub'));

    return false
});

}

X1pheR

Anybody please?