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> 。