JQuery anhängen() funktioniert nicht

Question

ich diesen <ul>

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

Dieser JavaScript-Code haben, die throug ein JSON-Objekt zu gehen gemeint ist, und die Optionen dem UL hinzufügen:

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

}); 

Wenn ich console.log() mache, kann ich sehen, dass das Looping funktioniert. Wenn ich das tue:

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

Es zeigt das HTML aktualisiert wird, wie erwartet. Im Browserfenster wird jedoch die UL als leer angezeigt!

Was mache ich falsch?

Answer 1

ich den Fehler gefunden wurde ein weiterer Teil des Codes Entleeren des <ul> wenn ich eine bestimmte Schaltfläche geklickt.

Answer 2

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

sollte

sein

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

Answer 3

Sie beziehen von ID-Objekt, so dass Sie #

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

vermisste ich input Bedürfnisse vorstellen würde richtig selbst geschlossen sein.

Answer 5

Ist das ein Tippfehler ?:

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

Sie bedeuten ?:

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

AKTUALISIERT Haben:

Try this:

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

Ich kann nicht wirklich sehen, was falsch ist, aber versuchen Sie stattdessen, nur um zu sehen, ob es funktioniert ...

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

Beide sollten arbeiten.

Answer 7

Das Tag Eingabe sollte geschlossen sein - wenn nicht, wenn nicht gültiges HTML in append() im Internet Explorer verwendet wird, wird das div nicht in den DOM-Baum eingefügt, so dass Sie später nicht mit jQuery darauf zugreifen können.