williamsdb williamsdb - 2 months ago 18
jQuery Question

jQuery events on responsive datatables not working

I have a jQuery event bound to an element within a data table which fires without issue when the table is full width. However, when the table is collapsed and data tables responsive is applied the event doesn't fire. There isn't anything in the console about any errors.

You can see the code below and try it out on jsfiddle here:

http://jsfiddle.net/891mdyvy/

Click on the trash can and you get a popup. Resize the page until the table has collapsed. Open out the column to reveal the trash can and when you click it nothing happens.

Any ideas?

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>

<script>
$(document).ready(function() {

// load data tables if element found
if (document.getElementById('data-table')) {
$('#data-table').DataTable({
"responsive": true,
"paging": true,
"searching": true,
"ordering": false,
"info": false
} );
}

$(".deleteMe").bind('click', function () {

var dataString = $(this).attr('data');

alert(dataString);
});

});

</script>
</head>
<body>

<table width="100%" id="data-table" class="display dataTable">
<thead>
<tr>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th width="10%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfas</td>
<td align="middle">fgfg</td>
<td align="middle">COMPLETED</td>
<td align="middle">4</td>
<td align="middle">4</td>
<td width="10%">
<a href="#">
<i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 1"></i>
</a>
</td>
</tr>
<tr>
<td>sdfs</td>
<td align="middle">test</td>
<td align="middle">2014-02-28</td>
<td align="middle">1</td>
<td align="middle">0</td>
<td width="10%">
<a href="#">
<i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 2"></i>
</a>
</td>
</tr>
<tr>
<td>sfdsf</td>
<td align="middle">fgfg</td>
<td align="middle">COMPLETED</td>
<td align="middle">4</td>
<td align="middle">4</td>
<td width="10%">
<a href="#">
<i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 3"></i>
</a>
</td>
</tr>
</tbody>
</table>

</body>
</html>

Answer

I would suggest use .on instead and attach your click function and data attribute to <a> instead of <i> as below:

DEMO HERE

Your last column of each row would change to

<td width="10%">
    <a href="#" class="deleteMe" data="some text 1">
        <i alt="Delete" class="fa fa-trash fa-lg" id="questionDelete" ></i>
    </a>
</td>

Same for other columns which is there in demo

JS for delete would be:

$(".dataTable").on('click','.deleteMe', function () { 
    var dataString = $(this).attr('data');
    alert(dataString);
});