Cannot access attributes of a link on a sorted/paginated row.
Cannot access attributes of a link on a sorted/paginated row.
quexal
Posts: 2Questions: 1Answers: 0
Hello,
I'm trying to use jQuery to read the id or data-id attributes on a link inside a row. The code below works fine (ie logs the value of the id attribute) on for the first 10 records, but it doesn't log anything on the 2nd page of results (or anything that is beyond the first 10 entries regardless of where they show up when sorted/filtered/paged).
Here's some sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- DataTables Responsive CSS -->
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<table id="dataTable">
<thead>
<tr>
<th>ID</th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
10
</td>
<td>
<a href="#" class="logid" id="10" >ID:10</a>
</td>
</tr>
<tr><td>
11
</td>
<td>
<a href="#" class="logid" id="11" >ID:11</a>
</td>
</tr>
<tr>
<td>
12
</td>
<td>
<a href="#" class="logid" id="12" >ID:12</a>
</td>
</tr>
<tr>
<td>
13
</td>
<td>
<a href="#" class="logid" id="13" >ID:13</a>
</td>
</tr>
<tr>
<td>
14
</td>
<td>
<a href="#" class="logid" id="14" >ID:14</a>
</td>
</tr>
<tr>
<td>
15
</td>
<td>
<a href="#" class="logid" id="15" >ID:15</a>
</td>
</tr>
<tr>
<td>
16
</td>
<td>
<a href="#" class="logid" id="16" >ID:16</a>
</td>
</tr>
<tr>
<td>
17
</td>
<td>
<a href="#" class="logid" id="17" >ID:17</a>
</td>
</tr>
<tr>
<td>
18
</td>
<td>
<a href="#" class="logid" id="18" >ID:18</a>
</td>
</tr>
<tr>
<td>
19
</td>
<td>
<a href="#" class="logid" id="19" >ID:19</a>
</td>
</tr>
<tr>
<td>
20
</td>
<td>
<a href="#" class="logid" id="20" >ID:20</a>
</td>
</tr>
<tr>
<td>
21
</td>
<td>
<a href="#" class="logid" id="21" >ID:21</a>
</td>
</tr>
<tr>
<td>
22
</td>
<td>
<a href="#" class="logid" id="22" >ID:22</a>
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- DataTables JavaScript -->
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#dataTable').DataTable();
$('.logid').click(function (e) {
console.log("ID passed is: "+ $(this).attr('id'));
});
});
</script>
</body>
</html>
Tried to make it as simple as possible... Why don't entries with ID's of 20-22 log anything when triggered?
Can someone suggest a workaround?
Thanks in advance for any help!
Q
This discussion has been closed.
Answers
Hmmn... of course, after hours of not making any progress... I post to this forum and immediately have an Aha moment.
It looks like since datatables is removing the extra rows from the DOM, they weren't getting the .click event attached to them.
The solution:
Move the .click event binding above the call to datatables!
Thanks me! Hope this helps someone else in the future!