0 votes

.each does not recognize dynamically generated elements.

The problem I have encountered is that I need to delete elements through checkbox however, what I usually do is delete the selected elements and then generate the table again with php and pass it with json to jquery and then add it to the page replacing it with .html, but when I want to delete again the elements that I select it does not recognize them. ... and I thought that maybe using .on to make it work but when it didn't work I realized that .on is only for events and that .each which is the one I use to generate the checkbox array is a method... so what I need is some way to use something similar to each in elements either normal or dynamically generated by jquery.

here is the code I use:

with this I verify that there are checkboxes selected and generate the message if you are sure to delete with a modal.

$('#btn_delete').click(function(){
        $("#chk:checked").each(function() {
                chk_A.push($(this).val());
            }
        );
        if (chk_A.length != 0) 
        {
            $('#exampleModalLabel').html('<h3>Confirmar</h3>');
            $('.modal-body').html('<label><b>una vez realizada esta accion no se podra revertir...</b></label>');
            $('.modal-footer').html('<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button><button type="button" class="btn btn-primary" id="btn_delu">Entendido</button>');
            $("#open_model").modal('show');
        }
        else
        {
            alert('no se a seleccionado ningun usuario');
        }
    });

with this I send the data with ajax once pressed that if it is sure to delete:

$('body').on("click","#btn_delu",function(){
        var chk_B = new Array;
        var a = 1;
        var b = 1;
        $("#chk:checked").each(   
        function() {
                chk_B.push($(this).val());
            }
        );

        $.ajax({
            type:'POST',
            url:'inicio.php',
            dataType:"json",
            data:{ajax:a,elim_us:b,'array':JSON.stringify(chk_B)},
            success:function(data)
            {
                if (data == "Error") 
                {
                    alert('No se han podido eliminar los usuarios seleccionados');
                }
                else
                {
                    $('#tbl_cont').html(data);
                    $("#open_model").modal('hide');
                    alert('se ha eliminado correctamente');
                }
            }
        });
    });

and this is the php that is in charge of deleting:

if (isset($_POST['elim_us'])) 
                {
                    try
                    {
                        $data = json_decode($_POST['array']);
                        $ids = implode(',', $data);
                        $verificar = $obj->Ejecutar_Instruccion('DELETE FROM usuarios WHERE id_us IN ('.$ids.')AND id_us !='.$_SESSION['id']);
                        $tabla_us = $obj->Ejecutar_Instruccion("select id_us, usuario_us, privilegio_us,aes_decrypt(contrasena_us, UNHEX(SHA2('tpn2019key',512))) as 'contrasena_us' from usuarios WHERE id_us !=".$_SESSION['id']);

                        foreach ($tabla_us as $renglon) 
                        {
                            $tabla_r .= '<tr class="centrar" ><td>'.$renglon['usuario_us'].'</td><td>'.$renglon['contrasena_us'].'</td><td>'.$renglon['privilegio_us'].'</td><td><input type="checkbox" id="chk[]" value="'.$renglon['id_us'].'" name="chk[]"></td></tr>';
                        }
                        echo json_encode($tabla_r);

                        /*echo json_encode($ids);*/
                    }
                    catch(Exception $e)
                    {
                        echo json_encode('Error');
                    }
                }
````

0voto

Try this way

$(document).on('click','#btn_delete', function(){
        $("#chk:checked").each(function() {
                chk_A.push($(this).val());
            }
        );
        if (chk_A.length != 0) 
        {
            $('#exampleModalLabel').html('<h3>Confirmar</h3>');
            $('.modal-body').html('<label><b>una vez realizada esta accion no se podra revertir...</b></label>');
            $('.modal-footer').html('<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button><button type="button" class="btn btn-primary" id="btn_delu">Entendido</button>');
            $("#open_model").modal('show');
        }
        else
        {
            alert('no se a seleccionado ningun usuario');
        }
    });

You should also change the second event

$('body').on("click","#btn_delu",function(){}

a

$(document).on('click','#btn_delu', function(){}

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X