jQuery调用成功后HTML没有改变

Question

我在网站上有一个投票机制。当人们投票赞成或反对时，调用此代码：

// Called right away after someone clicks on the vote up link
$('.vote_up').click(function() 
{    

var problem_id = $(this).attr("data-problem_id");

queue.voteUp = $(this).attr('problem_id'); 

var span = $(this).closest('span').find('span.votes');

queue.span = span;

vote(problem_id , 1);

//Return false to prevent page navigation
return false;       
});

它调用的投票函数如下所示：

var vote = function(problem_id , vote) 
{
    if ( vote == 1 )
    {
        queue.voteUp = problem_id;
    }
    else
    if ( vote == -1 )
    {
        queue.voteDown = problem_id;
    }   

    var dataString = 'problem_id=' + problem_id + '&vote=' + vote;

// The person is actually logged in so lets have him vote
        $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {                               
                    text = queue.span.text ();

                    if ( vote == -1 )
                    {
                        if ( data == "update_success" )
                        {
                            incrementedText = parseInt(text ,10) - 2;
                        }
                        else
                        {
                            incrementedText = parseInt(text ,10) - 1;
                        }
                    }
                    else
                    if ( vote == 1 )
                    {
                        if ( data == "update_success" )
                        {
                            incrementedText = parseInt(text ,10) + 2;
                        }
                        else                    
                        {
                            incrementedText = parseInt(text ,10) + 1;
                        }
                    }

                    queue.span.text(incrementedText + " ");
                },
                error : function(data) 
                {
                    errorMessage = data.responseText;

                    if ( errorMessage == "not_logged_in" )
                    {
                        queue.login = false;

                        //set the current problem id to the one within the dialog
                        $problemId.val(problem_id);                 

                        // Try to create the popup that asks user to log in.
                        //  $dialog.dialog('open');
                        $("#loginpopup").dialog();

                        errorMessage = "";

                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    if ( errorMessage == "already_voted" )
                    {
                        // Display a dialog box saying that the user already voted
                        $('<div />').html('You already voted this way on this problem.').dialog();
                    }
                    else
                    if (  errorMessage == "error_getting_vote" )
                    {

                        $('<div />').html('Error getting existing votes.').dialog();
                    }
                    else
                    {
                        // ? :)
                    }    
                } // End of error case  
            }); // Closing AJAX call.
    };

这是为投票按钮制作 HTML 的 PHP。该链接称为“重要”或“不重要”：

echo '<span class="half_text" style="color: #B77F37;">'.$problem_date.'</span>
<span id="votes" class="half_text" style="padding-left: 10px;">'.$vote.'</span>
<strong> <a class="vote_up" style="font-size: 80.0%; color: #295B7B; font-weight:bold; text-decoration:none;" href="#" data-problem_id="'.$problem_id.'">Important</a></strong>
|
<strong><a class="vote_down" style="font-size: 80.0%; color: #295B7B; font-weight:bold; text-decoration:none;" href="#" data-problem_id="'.$problem_id.'">Not Important</a></strong>';

当用户投票时，AJAX 被调用，一切正常。唯一的问题是 HTML 不会随着新的投票计数而更新。知道如何实现吗？

Answer 1

在您的 JavaScript 中，您尝试使用 votes 类 ($(this).closest('span').find('span.votes');) 选择 <span id="votes">。所以我建议改变：

<span id="votes" class="half_text" style="padding-left: 10px;">

收件人：

<span class="votes half_text" style="padding-left: 10px;">

我建议使用父元素来使您的选择器正常工作：

$('.vote_up').click(function() {
   console.log($(this).parents('div:first').children('.votes'));
});
//this requires there to be a div element that is the ancestor of the code you posted

这是上述解决方案的一个 jsfiddle：http://jsfiddle.net/jasper/DzZCY/1/