Question

I have a survey-type form that’s being populated from a web database on the client. I can populate the questions fine, but then I try to go through and trigger the click event where there is an existing answer (edit scenario), I’m finding that the new elements are not yet in the DOM so this doesn’t work. Here’s the code:

$(function() {
    var db = openDatabase(...);
    db.transaction(function(tx) {
        tx.executeSql("select ....", [surveyId], function(tx, results) {
            var items = "", answers = [];
            for (var i = 0; i < results.rows.length; i++) {
               var id = results.rows.item(i).id;
               items += "<div><input type='radio' name='q-" + id + "' id='q-" + id + "-1' /><label for='q-"+id+"-1'>Yes</label><input type='radio' name='q-" + id + "' id='q-" + id + "-2' /><label for='q-"+id+"-2'>No</label></div>";
               if (result.rows.item(i).answer) {
                   answers.push('#q-'+id+'-'+results.rows.item(i).answer);
               }
            }
            $('#questions-div').append(items);
            $.each(answers, function(i, e) { $(e).click(); });
        });
    });
});

Any tips how I can make this work, or better generally?

Answer 1

So I came up with a solution:

I replaced the line items += "<div> ...." with

var item = "<div><input type='radio' name='q-" + id + "' id='q-" + id + "-1' ";
if (results.rows.item(i).answer == 1) item += "checked ";
item += "/><label for='q-"+id+"-1'>Yes</label><input type='radio' name='q-" + id + "' id='q-" + id + "-2' ";
if (results.rows.item(i).answer == 2) item += "checked ";
item += "/><label for='q-"+id+"-2'>No</label></div>";
items += item;

… which means I no longer need the answers array or to trigger click events on the radio buttons.

I was hoping for something a bit neater, but this seems to work OK. Thanks @Nick Craver & @Andrew for helping me arrive at it!