ajax中的ajax无法正常工作

Question

我正在使用页面上的ajax(jobs.php)将php输出加载到div中,此输出每隔几秒刷新一次,以显示来自sql的最新记录列表.

我试图使用ajax删除一个选定的记录,这在一个独立的页面上工作正常但是当我尝试从jobs.php页面执行它没有任何反应.

$(function () {
    $('.trash').click(function () {
        var del_id = $(this).attr('id');
        var $ele = $(this).parent().parent();

        $.ajax({
            type: 'POST',
            url: 'deleterecord.php',
            data: {del_id: del_id},
            success: function (data) {
                if (data == "YES") {
                    $ele.fadeOut().remove();
                } else {
                    alert("record could not be deleted")
                }
            }
        });
    });
});

deleterecord.php

$delid = $_POST['del_id'];

$query5 = "DELETE from Records WHERE id = '$delid'";
$sql5 = mysqli_query($connection, $query5) or die(mysqli_connect_error());

if(isset($sql5)) {
    echo "YES";
} else {
    echo "NO";
}

jobs.php

<script type="text/javascript">
    refreshdiv();
</script>

我可能会出错的任何建议？

function refreshdiv() {

    // The XMLHttpRequest object

    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
}

Answer 1

由于删除按钮是动态加载的,因此您需要使用委派事件.
所以我们需要将click事件绑定到加载时存在的父元素,
例如body.

替换它

$('.trash').click(function () {

有了这个

$('body').on('click','.trash',function(){