jQuery append（）无法正常工作

Question

我有这个<ul>

<ul id="select_opts" class="bullet-list" style="margin-left:15px;"></ul>

此javascript代码旨在通过JSON对象并将选项添加到UL：

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);

});

如果我执行console.log（），则可以看到循环正在工作。 如果我做：

console.log($("#select_opts").html());

它显示了按预期更新的HTML。 但是，在浏览器窗口中，UL显示为空！

我究竟做错了什么？

Answer 1

$("select_opts").append(str);

应该

$("#select_opts").append(str);

Answer 2

您通过ID引用对象，因此错过了＃

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);
   //  ^
}

Answer 3

这是错字吗？：

$("select_opts").append(str);

你的意思是？：

$("#select_opts").append(str);

更新：

尝试这个：

$.each(q.opts, function(i, o) {
    var li = $('<li>').attr('id', 'li_' + i);
    var in = $('<input>').attr('type', 'text').attr('id', 'opt_' + i).val(o.option);
    var aa = $('<a>').attr('href', 'javascript:delOpt(' + i + ');').text('Delete');
    li.append(in).append(aa)
    $("#select_opts").append(li);
});

Answer 4

我真的看不到有什么问题，但是可以尝试一下，只是看看它是否有效...

$(str).appendTo("#select_opts");

两者都应该起作用。

Answer 5

输入标签应该关闭-否则，如果在Internet Explorer的append（）中使用无效的html时，div不会放入DOM树中，因此以后无法使用jQuery访问它。

Answer 6

我以为input需要适当地自动关闭。

Answer 7

我发现了该错误，当我单击某个按钮时，代码的另一部分正在清空<ul> 。