jQuery：ajaxコンテンツが間違ったdivクラスにロードされています

Question

ユーザーがページに表示されている投票に投票できるjQuery投票スクリプトがあります。特定のページには、（フォームを介して）多数の投票が表示され、jQueryは入力の値を特定の形式で取得し、そのデータをquery.phpページに送信します。

QUESTION 1:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user1" name="to" /> 
      <input type="hidden" name="pid" value="1"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

QUESTION 2:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user2" name="to" /> 
      <input type="hidden" name="pid" value="2"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

そして、これは私が実行しているjQueryのスクリプトです：

var ajax_load = "<img src='images/ajax-loader.gif' alt='loading...' />"; 
$("form.poll_query > input[type='radio']").click(function(e) { 
    e.preventDefault(); 
    var form= $(this).closest("form"); 
    var pid = $("input[name='pid']", form).val(); 
    var ans = $(this).val(); 
    var page = $("input[name='page']", form).val(); 
    var to = $("input[name='to']", form).val(); 

    $(this).closest("#poll").html(ajax_load); 
    $.post(
     "query.php?module=vote", 
     {answer: ans, pid: pid, to: to, page: page}, 
     function(responseText){ 
      $("#poll").hide(0,function() { 
       $(".result").html(responseText).fadeIn(1500); 
      }); 
     }, 
     "html" 
    ); 
}); 

をすべてが正しくレンダリング最初の投票で投票すると

これはサンプル投票ページは次のようになります。返される 'responseText'は、想定されるページに表示されます。しかし、ページ上のそれ以降のすべてのポーリングでは、 'ajax_load'が正しくロードされますが、 'responseText'はFIRSTポーリングの.resultクラスにロードされます。

これは、ページが最初に次のようになります。

Question 1? 
o YES 
o NO 

Question 2 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

代わりに、これは実際に何が起こるかです：このページはどのように見えるかです質問2上の特定のユーザーの投票場合

Question 1? 
o YES 
o NO 

Question 2? 
o YES 
o NO 

（ユーザーが質問2に投票したにもかかわらず）：

Question 1? 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

Question 2 
o YES 
o NO 

しかし、ユーザーが質問1に投票した場合、結果が正しくロードされます。

Question 1? 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

Question 2 
o YES 
o NO 

私は$(".result").html(responseText).fadeIn(1500);$(this).closest(".result").html(responseText).fadeIn(1500);へ

を変更しようとしたんしかし、まだ運ました。

Answer 1

pollの要素IDが重複しています。代わりにクラスを使用して、コールバック内のセレクタをより正確にする必要があります。あなたは$(this).closest()と正しい軌道に乗っています。 .pollと.resultセレクタは今クリックされたラジオボタンを囲む.poll_areaによってスコープされること

var pollArea = $(this).closest(".poll_area"); 
$.post(... , function(responseText) { 
    pollArea.find(".poll").hide(0,function() { 
     pollArea.find(".result").html(responseText).fadeIn(1500); 
}); 

注：

あなたのような何かをする必要があります。

Answer 2

私は、クラスではなくIDに基づいて要素を使用することをお勧めします。したがって、ユニークなIDでのdivの中にそれぞれの質問をラップ

<div id="q1"> 
QUESTION 1:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user1" name="to" /> 
      <input type="hidden" name="pid" value="1"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

$（ "＃Q1は.result"）HTML（ '...'）;