jQuery click on buttons in datatables doesn't work
jQuery click on buttons in datatables doesn't work
MikSco
Posts: 2Questions: 0Answers: 0
Hello.
I have this code:
<table id="responsive-datatable" class="table table-bordered table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>
<a class="a text-info" data-toggle="tooltip" title="" data-original-title="Maggiori info"><i class="fa fa-info-circle"></i></a>
<a class="a text-danger" data-toggle="tooltip" title="" data-original-title="Rimuovi dispositivo"><i class="fa fa-remove"></i></a>
<a class="a text-warning" data-toggle="tooltip" title="" data-original-title="Scarica backup config"><i class="fa fa-download"></i></a>
<a class="a text-success" data-toggle="tooltip" title="" data-original-title="Riavvia dispositivo"><i class="fa fa-repeat"></i></a>
<a class="a text-primary" data-toggle="tooltip" title="" data-original-title="Aggiorna dati dispositivo"><i class="fa fa-refresh"></i></a>
</td>
</tr>
<tr id="2">
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>
<a class="a text-info" data-toggle="tooltip" title="" data-original-title="Maggiori info"><i class="fa fa-info-circle"></i></a>
<a class="a text-danger" data-toggle="tooltip" title="" data-original-title="Rimuovi dispositivo"><i class="fa fa-remove"></i></a>
<a class="a text-warning" data-toggle="tooltip" title="" data-original-title="Scarica backup config"><i class="fa fa-download"></i></a>
<a class="a text-success" data-toggle="tooltip" title="" data-original-title="Riavvia dispositivo"><i class="fa fa-repeat"></i></a>
<a class="a text-primary" data-toggle="tooltip" title="" data-original-title="Aggiorna dati dispositivo"><i class="fa fa-refresh"></i></a>
</td>
</tr>
<tr id="3">
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>$320,800</td>
<td>
<a class="a text-info" data-toggle="tooltip" title="" data-original-title="Maggiori info"><i class="fa fa-info-circle"></i></a>
<a class="a text-danger" data-toggle="tooltip" title="" data-original-title="Rimuovi dispositivo"><i class="fa fa-remove"></i></a>
<a class="a text-warning" data-toggle="tooltip" title="" data-original-title="Scarica backup config"><i class="fa fa-download"></i></a>
<a class="a text-success" data-toggle="tooltip" title="" data-original-title="Riavvia dispositivo"><i class="fa fa-repeat"></i></a>
<a class="a text-primary" data-toggle="tooltip" title="" data-original-title="Aggiorna dati dispositivo"><i class="fa fa-refresh"></i></a>
</td>
</tr>
</tbody>
</table>
With this JS:
$(document).ready(function() {
// Responsive Datatable
$('#responsive-datatable').DataTable();
} );
$('.a').click(function(){
alert($(this).closest('tr').attr('id'));
});
When table is printed as full Work well but if is on a small screen and some rows are hidden i can't click on '<a>' because nothing appear. I must insert a "onclick" attribute for work...
How can i fix?
This discussion has been closed.
Replies
Hi @MikSco ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Ops... sorry.
Here the link: Codepen
You need to use jQuery Delegated Events. Something like this:
For example:
https://codepen.io/anon/pen/RvJzeB
Kevin