Селектор 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 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);
    });

});