Question

我有一个调查类型表单，它是从客户端上的Web数据库填充的。我可以很好地填充问题，但后来我尝试通过触发点击事件，其中存在现有答案（编辑方案），我发现新元素还没有在DOM中，所以这不起作用。这是代码：

$(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(); });
        });
    });
});

任何提示我如何才能使这项工作更好或更好？

Answer 1

我想在这里：

answers.push('#q-'+id+'-'+result);

你想推动这个：

answers.push('#q-'+id+'-'+result.rows.item[i].answer);

否则，您将'#q-XX-[object Object]'作为选择器，我认为您在1或2版'#q-XX-1'之后

Answer 2

我怀疑这实际上是一种竞争条件。我敢打赌，如果你在一小段延迟后执行你的each声明，事情就会按预期运作。是这样，原因在于，当您以编程方式插入新元素时，浏览器实际上会更新DOM时，您无法100％确定。我不确定最好的解决方案是什么：如果你要附加事件，我会说你应该在构建元素的同时做到这一点;但如果您触发点击，我倾向于不断测试元素的存在，然后在您知道它们存在时立即触发点击。

Answer 3

所以我想出了一个解决方案：

我用

替换了行items += "<div> ...."

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;

...这意味着我不再需要答案数组或触发单选按钮上的点击事件。

我希望有点整洁，但这似乎工作正常。谢谢@Nick Craver＆amp; @Andrew帮助我到达它！

jQuery在下一个声明之前追加未完成？

3 个答案: