Question

我目前正在使用PHP，SQL，jQuery和AJAX构建评级系统。

我工作得很好，除了一个小细节。当我第一次评分时，结果成功发送了rate.php文件，保存在我的数据库中，新结果发送回我的评级页面。但是当我再次尝试评价时，没有任何反应。

甚至jQuery“悬停效果”都不起作用。在我再次评价之前，我必须重新加载整个页面。

我尝试使用on和bind更改click。在那里帮助。我还尝试添加cache: false,并将success更改为done，最后还添加document.getById content.html(result);

我对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：

http://pastie.org/private/qql0ajaq9lfjqmisgvmzkq

和rate.php：

http://pastie.org/private/kgufwlmx69t8vxjugx9zyg

希望有人可以帮我解决这个问题。

Answer 1

您正在替换元素，这会导致您的点击事件处理程序停止。尝试将点击处理程序附加到文档中。

变化：

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

要：

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

同样在您的代码中，因为您使用的是jQuery，您可以更改它：

document.getElementById(id).innerHTML=result;

要：

$('#' + id).html(result);

Answer 2

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

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

这样，一旦在AJAX调用中替换HTML，就不会丢失事件

第二次没有AJAX效应

2 个答案: