Php 第二次没有AJAX效果

我目前正在使用PHP、SQL、jQuery和AJAX构建一个评级系统

我做得很好，除了一个小细节。 当我第一次评分时，结果成功发送到rate.php文件，保存在我的数据库中，新结果发送回我的评分页面。 但当我再次尝试评分时，什么都没有发生

甚至jQuery的“悬停效应”也不起作用。我必须重新加载整个页面，然后才能再次评分

我已尝试使用

bind

和

单击
在
上更改
。在那里帮忙。
我还尝试添加了
cache:false、
并将
success
更改为
done
，最后还添加了
document.getById
和
content.html（结果）

我对ajax非常陌生，所以可能有一种更简单的方法来实现这一点

我听说过一些叫做JSON的东西，但我不知道这是否适用


下面是我在site.php上的jQuery和AJAX：

$(document).ready(function() {


$('span').hover(function() {
    $(this).prevAll().andSelf().toggleClass('my');

});



$('span').on('click', function() {

    // Define data to send
    var id = $(this).parent().attr("id");
    var star = $(this).attr("class");

    // Put data together and send request with ajax
    var post = "id="+id+"&stars="+star;
    $.ajax( {
        url:"includes/rate.php",
        cache: false,
        data: post,
        success:function(result) {
            document.getElementById(id).innerHTML=result;
        }

     });    

});

});

在site.PHP上加载当前评级的PHP：

$(document).ready(function() {


$('span').hover(function() {
    $(this).prevAll().andSelf().toggleClass('my');

});



$('span').on('click', function() {

    // Define data to send
    var id = $(this).parent().attr("id");
    var star = $(this).attr("class");

    // Put data together and send request with ajax
    var post = "id="+id+"&stars="+star;
    $.ajax( {
        url:"includes/rate.php",
        cache: false,
        data: post,
        success:function(result) {
            document.getElementById(id).innerHTML=result;
        }

     });    

});

});


以及rate.php：


希望有人能帮我解决这个问题。
您正在替换元素，这导致您的单击事件处理程序停止。请尝试将单击处理程序附加到文档

更改：

$('span').on('click', function() {

致：

在您的代码中，由于您使用的是jQuery，因此您可以更改以下内容：

document.getElementById(id).innerHTML=result;

致：

您应该绑定DOM中始终存在的元素。我倾向于只使用
文档

$(document).on('click', 'span', function(){
  // Code here
});

这样，一旦在AJAX调用中替换HTML，您就不会丢失事件了
太棒了！Ajax调用现在工作得很好：D-但是如何让悬停效果工作呢？：）
$(document).on('click', 'span', function(){
  // Code here
});