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

  • colincolin Posts: 3,664Questions: 0Answers: 647

    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

  • MikScoMikSco Posts: 2Questions: 0Answers: 0

    Ops... sorry.

    Here the link: Codepen

  • kthorngrenkthorngren Posts: 4,846Questions: 19Answers: 1,067

    You need to use jQuery Delegated Events. Something like this:

    $('#responsive-datatable tbody').on('click', '.a', function(){
            alert($(this).closest('tr').attr('id'));
            });
    

    For example:
    https://codepen.io/anon/pen/RvJzeB

    Kevin

Sign In or Register to comment.