Checkbox event on second page don't work

JACOBKRA

I have a checkbox inside in my table using to select the row. All event work on the first page, but on second page nothing.
I have a checkbox inside in my table using to select the row. All event work on the first page, but on second page nothing.

<table id="demandes" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>N° Demande</th>
            <th>Date Demande</th>
            <th>N° Certificat</th>
            <th>Client</th>
            <th>Nature marchandise</th>
            <th>Moyen de transport</th>
            <th>Nombre de colis</th>
            <th>Poids</th>                                       
            <th>Date Connaissement</th>                                       
            <th>Conditions d'assurance</th>
            <th>Valeur Assurée</th>
            <th>Lieu de départ</th>
            <th>Date de voyage</th>
            <th>N° Connaissement</th>                                  
            <th>Destination</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="certificat[]" value="{{ $demande->idVehicule }}" class="checked" data-demande="{{ $demande->idVehicule }}">
            </td>
            <td align="center"><a href="{{route('detail',['id'=> $demande->idVehicule])}}"
                 style="color:#8F4F43;text-decoration:underline;font-weight:bold">
                 {{ $demande->idVehicule}}</a></td>
            <td>{{$demande->dtEntree}}</td>
            <td>{{$demande->permisCd}}</td>
            <td>
                {{ $demande->listInfos[0]->value}}
            </td>
            <td>{{$demande->conducteur3}}</td>
            <td>
                {{ $moyen_transport}}
            </td>
            <td> 
                {{ isset($demande->listInfos[4]) ? $demande->listInfos[4]->value : ''}}
            </td>
            <td>{{$demande->poidsTc}}</td>                                
            <td>{{ isset(explode('du', $demande->modele)[1]) ? explode('du', $demande->modele)[1] : ''}}</td>
            <td>{{$demande->version}}</td>
            <td>{{ number_format($demande->puissance, 0, "", " ") }}</td>
            <td>{{$demande->caros}}</td>
            <td>{{$demande->miseCirculation}}</td>
            <td>{{strtoupper($demande->modele)}}</td>
            <td>{{strtoupper($demande->lieuPermis)}}</td>
        </tr>
        @endforeach
    </tbody>
    
</table>

 let demandeTable = $('#demandes').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    {
                    extend: 'excelHtml5',
                    filename: 'LISTE DES DEMANDES',
                    title: 'LISTE DES DEMANDES',
                    exportOptions: {
                    columns: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
                }
                    }
                ],
                columnDefs: [
                    {
                        "targets": [ 6 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 7 ],
                        "visible": false
                    },
                    {
                        "targets": [ 8 ],
                        "visible": false
                    },
                    {
                        "targets": [ 9 ],
                        "visible": false
                    },
                    {
                        "targets": [ 10 ],
                        "visible": false
                    },
                    {
                        "targets": [ 12 ],
                        "visible": false
                    },
                    {
                        "targets": [ 17 ],
                        "visible": false
                    },
                    
                ]
            } );

here is what i try to do :

$('.checked').on('click', function() {
                  if($(this).is(":checked")){
                    demandes.push($(this).data('demande'));
                    console.log('All selected', demandes)
                }
                else if($(this).is(":not(:checked)")){
                    demandes = demandes.filter(demande => demande != $(this).data('demande')) 
                    console.log('All selected', demandes)
                }
            });

This work on the first page, but on the second page it don't work.

I try this again but nothing :

$(document).on('click','.checked', function() {
                  if($(this).is(":checked")){
                    demandes.push($(this).data('demande'));
                    console.log('All selected', demandes)
                }
                else if($(this).is(":not(:checked)")){
                    demandes = demandes.filter(demande => demande != $(this).data('demande')) 
                    console.log('All selected', demandes)
                }
            });

I need a help please

colin

Please see this section of the FAQ - this should get you going. Tl;dr - you need to use delegated events.

Cheers,

Colin

JACOBKRA

Thanks, i visited this page befor but dit'nt no how bind event on my chexbox. It work on tr or td.

$('#demandes tbody').on('click', 'td', function () {
                    console.log('ok');
                });

How can i get event on my checbox ? i try this :

$('#demandes tbody').on('click', '.checked', function () {
                    console.log('ok');
                });

But it don't work.

colin

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

JACOBKRA

This is a test case https://codepen.io/krajacob/pen/mdXpXep

JACOBKRA

But it work in codepen , but not localy, let clear my cache

kthorngren

My guess is you aren't using DOM sourced data like the codepen but something like ajax to load the data. In this case the tbody is likely not in the DOM when $('#demandes tbody').on('click', 'td', function () { is executed. Change the selector like this:

$('#demandes').on('click', 'tbody td', function () {
                    console.log('ok');
                });

Kevin

JACOBKRA

Thanks Kevin for your answer, but it still does not work.

kthorngren

Its hard to say why its not working locally for you without seeing the problem. Can you post a link to your page or a test case replicating the issue so we can help debug?

Do you have the event handler in the document.ready() function? If not it might be executing before the table is in the DOM.

Kevin

JACOBKRA

This is all my js code : https://codepen.io/krajacob/pen/RwQxeaj

kthorngren

It looks like it should work. Sorry but we will need to see a running test case showing the problem to help debug.

Kevin

JACOBKRA

Ok i see, the problem is that i can'nt show a running test case. Thanks you for your help