여러 라디오 세트에서 동적 JQuery Buttonset 만들기

Question

아주 간단한 것을 만들려고합니다. SQL에서 전달 된 쿼리를 기반으로 동적 인 "예"/ "아니오"질문을 생성하는 코드를 사용하여 10-20 개 질문을 반환합니다.

JQuery Buttonset()을 사용해 보았지만 동적 div에서는 작동하지 않습니다. 대부분의 경우 첫 번째 세트로 작동하도록 설정할 수 있습니다. 그런 다음 모두 실패합니다.

SPAN 요소를 사용하여 간단한 버튼을 만드는 데 의지했지만, 그러면 예와 아니요가 동시에 선택되었는지 확인하는 데 문제가 발생합니다. 현재 생성되어 각각 좋아 :

$.ajax({ 
    url: 'getQuestions.asp', 
    dataType: "json", 
    data: { area: area }, 
    success: function (data) { 
     $('#output').html('<div class="center" id="date">'+name+' - Audit Area is '+area+'</div><div class="table"><div id="radio">') 
     var len = data.length; 
     for (var i = 0; i< len; i++) { 
      $('#output').append('<div class="tr"><div class="col1">Q'+data[i].Qno+'.</div><div class="col2">'+data[i].Question+'</div><div class="col3"><span class="button" data-val="yes" name="Q'+data[i].Qno+'">&#10004;</span>&nbsp;&nbsp;<span class="button" data-val="no" name="Q'+data[i].Qno+'">&#10008;</span></div></div>') 
     } 
     noQuestions = i; 
     $('#output').append('</div><div class="center" id="date"><div class="button wide" id="finish">Finish Audit</div></div>') 
     $('.col2').each(function(){ 
      $(this).parent().find('.col1, .col3').height($(this).height()) 
     }); 
     $('#output').append('</div>') 
    } 
}); 

버튼은 내가 name과 data-val 특성과 독특한 만든 긴 append 줄에 생성됩니다.

ID가 #radio 인 DIV를 만든 경우 $("#radio").buttonset();을 사용하면 첫 번째 #radio 요소에만 영향을줍니다. 역동적 인 예/아니오 질문으로 어떻게 이것을 달성 할 수 있습니까?

Answer 1

아마도 도움이 될 것입니다. 아약스 호출을 기반으로 jquery 아코디언을 업데이트하고자 할 때, 아약스의 데이터를 표시하기 위해 요소를 제거한 다음 다시 초기화해야한다는 것을 알았습니다. 코드 줄은 다음과 같습니다
$("#accordion2").accordion('destroy').accordion({header: "h3", collapsible: true, active: false, heightStyle: "content"});

는이처럼 보이는 .onreadystatechange과 결합 :

function showLookups(str) { 
if (str == "") { 
    document.getElementById("accordion2").innerHTML = ""; 
    return; 
} else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("accordion2").innerHTML = xmlhttp.responseText; 
      $("#accordion2").accordion('destroy').accordion({header: "h3", collapsible: true, active: false, heightStyle: "content"}); 
     } 
    }; 
    xmlhttp.open("GET","faqlookup.php?q="+str,true); 
    xmlhttp.send(); 
}} 

나는 이것이 어떤 식 으로든 도움이되기를 바랍니다. 나는 의견을 말할만큼 충분한 평판을 가지고 있지 않다. ...