題記:依然是量表系統工程,答題的過程中除了點擊下一題來進入下一題外,還可以在選完選項後自動跳入下一題。代碼如下:
//自動切換下一題
function nextAjax(){
var num = $(".question_number").text();
//alert(num);
//return;
var formid = $(".question_form").attr("nameid");
var hidPatientid = $('.hidPatientid').text();
//return;
var tag = false;
var optionVal;
optionVal = $("input[name='option']:checked").attr('value');
$.ajax({
url:"/formpreview/getNext",
type:"POST",
dataType:"json",
data:{
"DATA": {"FORMID":formid,"NUM":num,"optionVal":optionVal,"hidPatientid":hidPatientid}
},
success: function(data){
if(data.flag){
$(".question_number").text(data.num+".");
$("#question_content").text(data.data.question);
$("#li_optiona").empty();
$("#li_optiona").append('<input name="option" id="optionA" type="radio" value="1"><label for="optionA"> A. <span id="span_optiona"></span></label>');
$("#span_optiona").text(data.data.optionA);
$("#li_optionb").empty();
$("#li_optionb").append('<input name="option" id="optionB" type="radio" value="2"><label for="optionB"> B. <span id="span_optionb"></span></label>');
$("#span_optionb").text(data.data.optionB);
$("#li_optionc").empty();
if(data.data.optionC != ""){
$("#li_optionc").append('<input name="option" id="optionC" type="radio" value="3"><label for="optionC"> C. <span id="span_optionc"></span></label>');
$("#span_optionc").text(data.data.optionC);
}
$("#li_optiond").empty();
if(data.data.optionD != ""){
$("#li_optiond").append('<input name="option" id="optionD" type="radio" value="4"><label for="optionD"> D. <span id="span_optiond"></span></label>');
$("#span_optiond").text(data.data.optionD);
}
$("#li_optione").empty();
if(data.data.optionE != ""){
$("#li_optione").append('<input name="option" id="optionE" type="radio" value="5"><label for="optionE"> E. <span id="span_optione"></span></label>');
$("#span_optione").text(data.data.optionE);
}
$("#li_optionf").empty();
if(data.data.optionF != ""){
$("#li_optionf").append('<input name="option" id="optionF" type="radio" value="6"><label for="optionF"> F. <span id="span_optionf"></span></label>');
$("#span_optionf").text(data.data.optionF);
}
$("#li_optiong").empty();
if(data.data.optionG != ""){
$("#li_optiong").append('<input name="option" id="optionG" type="radio" value="7"><label for="optionG"> G. <span id="span_optiong"></span></label>');
$("#span_optiong").text(data.data.optionE);
}
$('input[value='+data.data.answers+']').attr("checked",true);
$('audio').attr('src','../../public/audio/'+data.data.formid+data.num+'.mp3');
}
else{
$('.main_cover,.finish').css("display","block");
// if(value=='true'){
$('audio').attr('src','../../public/audio/end.mp3');
// }
$('.finish_cont .next').click(function(){
window.close();
});
tag = true;
$.ajax({
url:"/formpreview/end",
type:"POST",
dataType:"json",
data:{
"DATA": {"TAG":tag,"FORMID":formid,"hidPatientid":hidPatientid}
},
success: function(data){
}
});
}
}
});
}
var option = $("input[name='option']");
option.live('change',function(){
setTimeout(nextAjax,250);
});
這裏着重說一下live綁定事件,項目開始時以爲給option綁定change事件就會給每個option綁定change事件,事實當然不是,只執行一次,如果需要多次執行,就得使用事件委託。
與bind()不同的是,live()一次只能綁定一個事件。
這個方法跟傳統的bind很像,區別在於用live來綁定事件會給所有當前以及將來在頁面上的元素綁定事件(使用委派的方式)。比如說,如果你給頁面上所有的li用live綁定了click事件。那麼當在以後增加一個li到這個頁面時,對於這個新增加的li,其click事件依然可用。而無需重新給這種新增加的元素綁定事件。