これは私のメインページで、クリックするとajax経由で値が渡され、結果がajaxによってチェックされ、各質問の正解/不正解に対応する出力が表示されるラジオボタンがあります。そして問題は、ラジオボタンをクリックするとアンバインドイベントが正常に機能していることです。回答がチェックされ、結果が表示され、もう一度クリックしても何も起こりませんが、問題はクリックイベントが削除されないことです。関数が機能していると思って何度もクリックできます大丈夫、一度だけ。
では、一度クリックするとクリックできないようにするにはどうすればよいですか、どこに問題がありますか
<!doctype html>
<head>
<link href="<?php echo base_url('css/style.css');?>" type="text/css" rel="stylesheet"/>
<script src="<?php echo base_url('javascript/jquery.js');?>" rel="javascript" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="main-content">
<?php foreach($result as $rows):?>
<form>
<div class="question-box">
<?php echo '<h1 class="Qbanner">Q.</h1>'.'<h2>'.$rows->question.'</h2></br>';?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="a"><?php echo $rows->option1;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="b"><?php echo $rows->option2;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="c"><?php echo $rows->option3;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="d"><?php echo $rows->option4;?>
<h5 class="result"></h5>
</div>
</form>
<?php endforeach;?>
</div>
</div>
<!-- wrapper div ends -->
<script>
$(document).ready(function(){
var clickedval,qid;
$("input:radio").bind('click',function(e){
clickedval=$(this).val();
qid=$(this).attr('name');
var siteurl='<?php echo site_url();?>' + '/site/checkAnswer';
$this=$(this).parent("div.question-box");
$allradio=$(this).parent("div.question-box").children();
$.ajax({
url:siteurl,
dataType:'json',
type:'post', data:{'answer':clickedval,'questionid':qid},
success:function(data){
$this.find('.result').html(data.resultstatus);
$allradio.unbind('click');
}
});
});
});
</script>
</body>
</html>