Создание динамического набора кнопок JQuery из нескольких радиостанций

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 атрибутов.

Если я создаю DIV с идентификатором #radioзатем используйте $( "#radio" ).buttonset(); это влияет только на первый #radio элемент. Как бы я достиг этого с помощью динамического набора вопросов да / нет?

Answer 1

Может быть, это поможет. Когда я захотел обновить аккордеон jquery на основе вызова ajax, я обнаружил, что мне нужно уничтожить, а затем повторно инициализировать элемент для отображения данных из ajax. Строка кода выглядит следующим образом:
$( "#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();
}}

Я надеюсь, что это поможет в некотором роде. У меня недостаточно репутации, чтобы комментировать...