Function is not defined when the html is load from another page with ajax

Question

I have a table in one page and i fetch with the rows of a database with ajax, i have a button and onclick he does a function named deleteRow() but when i click says that deleteRow() is not defined.

Page where i want to show the table:

<table>
    <thead>
        <td>Id</td>
        <td>Nome</td>
        <td>email</td>
        <td>numero</td>
        <td>data</td>
        <td>hora</td>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
    $(document).ready(function(){
        update();
        setInterval(function(){update()}, 10000);
        function update(){
            $.ajax({
                type: 'post',
                url: 'getReservas.php',
                success: function (response) {
                    $("table").children("tbody").html(response);
                }
            });
        }
        function deleteRow(elem){
            console.log("oi");
            var isto = elem;
            var id = isto.attr("id");
            $.ajax({
                type: "POST",
                url: "deleteReserva.php",
                data: id,
                success: function(data){
                    isto.remove();
                }
            });
        }
    });
</script>

getReservas.php

<?php
    include "conexaoBaseDados.php";
    $query = $mysqli->query("SELECT * FROM reservas");
    $dados = array();
    if($query->num_rows > 0){
        while($row = $query->fetch_assoc()){
            $dados[] = $row;
        }
        foreach($dados as $r){
            echo "<tr>";
            echo "<td onclick='deleteRow(this);' id=". $r["id"] .">" . $r['id'] . "</td>";
            echo "<td>" . $r['nomeCliente'] . "</td>";
            echo "<td>" . $r['emailCliente'] . "</td>";
            echo "<td>" . $r['numeroCliente'] . "</td>";
            echo "<td>" . $r['dataReserva'] . "</td>";
            echo "<td>" . $r['horaReserva'] . "</td>";
            echo "</tr>";
        }
    }
?>

Answer 1

The deleteRow() function is defined inside the ready callback, so it only exists inside that callback's scope.

You need to move the deleteRow function code to an outer scope.

For example -

<script>

    function deleteRow(elem){
        console.log("oi");
        var isto = elem;
        var id = isto.attr("id");
        $.ajax({
            type: "POST",
            url: "deleteReserva.php",
            data: id,
            success: function(data){
                isto.remove();
            }
        });
    }

    $(document).ready(function(){
        update();
        setInterval(function(){update()}, 10000);
        function update(){
            $.ajax({
                type: 'post',
                url: 'getReservas.php',
                success: function (response) {
                    $("table").children("tbody").html(response);
                }
            });
        }
    });
</script>