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 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);
      });
   }
});

Answer 2

如果是最新的jQuery，


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

或者您可以尝试：


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

希望有所帮助

Answer 3

选择器无法正常工作，因为您尝试访问的元素在创建它们时不存在。

为此，您应该使用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);
    });

});

Jquery选择器不处理通过ajax加载的内容

3 个答案: