Jquery 选择器不适用于通过 ajax 加载的内容答案

【问题标题】：Jquery selector not working on content loaded through ajaxJquery 选择器不适用于通过 ajax 加载的内容
【发布时间】：2012-03-14 15:09:28
【问题描述】：

我有下面的代码来发送人们通过 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>

【问题讨论】：

请发布更多详细信息，例如下一个链接是什么以及选项如何更改

标签： jquery ajax jquery-selectors

【解决方案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);
      });
   }
});

【讨论】：

【解决方案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);
    });

});

【讨论】：

【解决方案3】：

如果是最新的 jQuery，


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

或者你可以尝试这样做：


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

希望对你有帮助

【讨论】：