jQuery click on buttons in datatables doesn't work

jQuery click on buttons in datatables doesn't work

MikScoMikSco 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?

Replies

This discussion has been closed.