jquery选择器不工作通过ajax加载的内容

Question

我有下面的代码发送单选按钮的人通过ajax点击的值。但它只适用于我给出的第一套选项。用户按下一个链接后，所有的选项都改变了，并且新的一个通过ajax进入。但是，在这个选择器不工作。

$(".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); 
     }); 
    } 
});