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が呼び出される

、すべてがOKに動作します。唯一の問題は、HTMLが新しい投票数で更新されないことです。どのように私はそれを達成することができますか？

Answer 1

JavaScriptはvotesクラス（$(this).closest('span').find('span.votes');）を使用して<span id="votes">を選択しようとしています。だから私は変更することをお勧めします：

<span id="votes" class="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です：

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

私が正しくあなたのセレクタを動作させるために親要素を使用することをお勧めします： http://jsfiddle.net/jasper/DzZCY/1/