jQueryセレクタがajaxを介してロードされたコンテンツで動作しない

Question

私は以下のコードをajax経由でクリックしたラジオボタンの値を送信するようにしています。しかし、それは私が与えるオプションの最初のセットでのみ動作します。ユーザーが次のリンクを押すと、すべてのオプションが変更され、新しいものがajaxによってloaededされた後。しかし、このセレクタは動作していません。

$(".options input").click(function(){ 
var ans = $(this).val(); 

$.post("sessions", { action: "set_answer", answer: ans, question: qid }, 
function(data) { 
alert("Data Loaded: " + data); 
}); 


}); 

解決策はありますか？以下はオプションの仕方です。

<div class="options"> 
<input id="1"type="radio" name="answer" value="Two" />Two<br/> 
<input id="2"type="radio" name="answer" value="One" />One<br/> 
<input id="3"type="radio" name="answer" value="Four" />Four<br/> 
<input id="4"type="radio" name="answer" value="Five" />Five<br/> 
<input id="5"type="radio" name="answer" value="Six" />Six<br/>  
</div> 

Answer 1

最新のjQueryのであれば、

 

$('.options input').on('click', function(event) { 
.... 
 

それともあなたがやって試みることができる：

 

$(".options input").live("click", function(){ 
.... 
 

が、それはセレクタは、あなたがしている要素ので、動作していない

Answer 2

お役に立てば幸いですあなたがそれらを作成している時点で存在しないアクセスしようとしている。

これを行うには、Jquery Onイベントハンドラを使用する必要があります。 Ajaxの場合のようにプログラミカルに作成しても、ドキュメント全体の要素が選択されます。

使い方（未テスト）：

$(".options input").on("click", function(event){ 
    var ans = $(this).val(); 

    $.post("sessions", { action: "set_answer", answer: ans, question: qid }, 
    function(data) { 
    alert("Data Loaded: " + data); 
    }); 

}); 

Answer 3

jQueryの1.7 +は、このしようとした場合：

$(document).on('click', '.options', function(){ 
    if ($(e.target).is('input')) { 
     var ans = $(this).val(); 

     $.post("sessions", { action: "set_answer", answer: ans, question: qid }, function(data) { 
     alert("Data Loaded: " + data); 
     }); 
    } 
});