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

вы ссылаетесь на объект по идентификатору, поэтому вы пропустили #

$.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

Тег Input должен быть закрыт - если нет, то при использовании недопустимого html в append () в Internet Explorer div не помещается в дерево DOM, поэтому вы не сможете получить к нему доступ через jQuery позже.

Answer 4

Я не могу понять, что не так, но попробуйте вместо этого просто посмотреть, работает ли он ...

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

Оба должны работать.

Answer 5

Это опечатка?:

$("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 6

Я нашел ошибку, другая часть кода очищала <ul>, когда я нажимал определенную кнопку.

Answer 7

Я думаю, что input должен быть правильно самозакрытым.