How to update a page after Insert, update or delete with ajax without reflesh

Question

I have the code on the exten page delete.php that makes the actions,

HTML:

<div class="modal fade" id="modalAddfoto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Adicionar Foto</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form class="addfoto" method="POST" enctype="multipart/form-data">
                            <div class="row justify-content-md-left">
                                <div class="col col-lg-3">
                                    <label class="control-label" for="datavisita">Data Vísita</label>
                                </div>
                                <div class="col col-lg-6">    
                                    <input type="text" name="dtvisita" id="dtvisita" required autocomplete="off" class="form-control  form-control-sm form-group small" />
                                </div>
                            </div>

                            <div class="row justify-content-md-left">
                                <div class="col col-lg-3">
                                    <label class="control-label" for="idvisita">Visíta</label>
                                </div>
                                <div class='col col-md-6'>   
                                    <input type="text" name="idvisita" id="idvisita" readonly class="form-control  form-control-sm form-group small" value="<?php echo $_SESSION['id']; ?>" />
                                </div>
                            </div>
                            <br />
                            <div class="row justify-content-md-left">
                                <div class="col col-lg-3">
                                    <label class="control-label" for="percentandamento">Porcentagem Andamento</label>
                                </div>
                                <div class="col col-md-6 slidecontainer">
                                    <input type="range" name="percentandamento" id="percentandamento" required min="1" max="100" value="1" class="form-control-range slider" oninput="disp.value = percentandamento.value">
                                    <output  id="disp"></output>
                                </div>
                            </div>
                            <div class="row justify-content-md-left">
                                <div class="col col-lg-3">
                                    <label class="control-label" for="caminhofoto">Foto</label>
                                </div>
                                <div>   
                                    <input type="file" name="caminhofoto" id="caminhofoto" required class="form-control-file form-control-sm form-group small" accept="image/png,image/jpg" />
                                </div>
                            </div>
                            <div class="row justify-content-md-left">
                                <div class="col col-lg-3">
                                    <label class="control-label" class="control-label" for="descricaofoto">Descrição Foto</label>
                                </div>
                                <div class='col-md-auto'>                
                                    <textarea name="descricaofoto" id="descricaofoto" cols="25" rows="3" class="form-control  form-control-sm form-group small" ></textarea>
                                </div>
                            </div>  
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="submit" id="btnAdd" class="btn btn-primary">Salvar</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        
         <div class="container">
         <!--getData.php-->
        <table class="table table-bordered table-responsive">
    <thead>
        <tr>
            <th>#</th>
            <th>Decrição Foto</th>
            <th>Data Visita</th>    
            <th>Andamento</th>
            <th>Foto</th>
            <th colspan="2" class="text-center">Ações</th>
        </tr>
    </thead>
    <tbody>
     <tr>
                    <td>1</td>
                    <td>Teste 01</td>
                    <td>18/10/2018</td>
                    <td>60%</td>
                    <td><img src="<?php print($row['caminhofoto']); ?>" alt="Imagem" height="42" width="42"></td>
                    <td align="center">
                        <a id="delfoto" data-id="<?php echo $row['idfoto'] ?>"><i class="fas fa-trash"></i></a>
                    </td>
                </tr>
    </tbody>
    </table>

         </div>

In my code I have: the getData.php that queries the database and displays a table with the returned data

fetchUser();
function fetchUser()
{
    $.get("getData.php", function (data, status) {

    }).done(function (data) {
        $('#result').html(data);
    });
}

In the case of delete,

$("#delfoto").click(function () {
    id = $(this).data("id");
    alert(id);
    $.get("delete.php?id=" + id, function (data, status) {

    }).done(function (data) {
        fetchUser();
    });
});

in the case of delete <a id="delfoto" data-id="<?php echo $row['id'] ?>"><i class="fas fa-trash"></i></a> The problem is that as it calls an external page to display the data in the div result then it is in the empty browser html code, as if it did not exist, and when trying to delete a record by clicking on the link icon id="delfoto" nothing happens precisely because it is as if there is no such code on the page.

I wonder if there is some other way to update the data after a CRUD action or if there is how to fix that without reflesh.

Answer 1

Analyzing your question better I realized what has happened: As your link is added after the page startup it does not have the System Event that is added right at startup and necessary for the action. But you can use a static element of the page to add the event.

Your click function would be:

$("body").on('click','#delfoto', function () {
  // a partir da versão 1.7 + pode-se usar também:
  // $('#delfoto').live( 'click', function () {

    id = $(this).data("id");
    alert(id);
    $.get("delete.php?id=" + id, function (data, status) {

    }).done(function (data) {
        fetchUser();
    });
});

More information on links:

https://api.jquery.com/on/#on-Events-selector-data-Handler https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements https://davidwalsh.name/event-delegate