javascript - 使用ajax从另一个页面加载html时未定义函数

Question

我在一页中有一个表，我用ajax获取数据库的行，我有一个按钮，onclick他执行一个名为deleteRow()的函数，但是当我单击时说deleteRow()未定义。

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

deleteRow() 函数是在 ready 回调内部定义的，因此它仅存在于该回调的作用域内。

您需要将deleteRow函数代码移至外部作用域。

例如 -

<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>