2010-01-29 13 views
9

Verwendung des folgenden Codesden Wert eines Box dynamisch erstellten Texteinstellung mit jQuery

var newDiv = $(document.createElement("div")); 
var newTextBox; 

newTextBox = $(document.createElement("input")) 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
alert(newDiv.html()); 

ich folgendes

<input name="textbox" id="textbox" type="text"> 

ich die gleiche Sache mit

$("#textbox").val("test"); 

Mit holen

newTextBox = $("<input/>"); 

hilft auch nicht

Wo ist mein Wert?

EDIT: soltuion

So, weiter im Stapel bis ich das DOM wurde Umwandlung ich in einen String gebaut und da - wie Munch erwähnt - der dynamische Wert bekommt mit dem Tag nicht hinzugefügt, es erschien nicht.

Danke für die Hilfe

+0

Wie wäre es Verkettungs '.attr ('Wert', 'Text') 'in der Deklaration? Das letztere Problem funktioniert nicht, bevor Sie das Objekt in das DOM eingefügt haben. –

+0

Ich habe mehrere Dinge ausprobiert, um das zum Laufen zu bringen, interessanterweise nicht. Weder @ Nikcs noch @ TiuTalks Vorschläge machen einen Unterschied. Ich bin fasziniert. – karim79

+0

Es ist interessant, weil wenn ich eine Warnung mache (newTextBox.val()); es zeigt den richtigen Wert vor und nach dem Einspritzen in das div – Mason

Antwort

9

jQuery wird den Wert in das erzeugte Element nicht setzen die generierten HTML. Sowohl .attr('value', 'blah') als auch .val() erhalten den aktuellen Wert von dem, was in der Texteingabe eingegeben oder geändert wurde, und ermöglichen Ihnen, diesen Wert zu sehen, wenn Sie die Eingabe auf der Seite betrachten oder sie an den Server senden. Sie werden es jedoch nicht sehen, wenn Sie sich den HTML-Code ansehen.

Sie können immer noch den Wert manipulieren alles, was Sie wollen, Sie werden gerade keine Änderungen in Firebug sehen, wie Sie mit Klassenänderungen tun, Styling etc.

AFAIK, ist dies nichts weiter jQuery ohne Verwendung. Das gleiche passiert mit:

document.getElementById('textbox').value = 'my text'; 

Das Wert-Attribut ist nur etwas Wert vom Server zu setzen. Es wird nicht mit Javascript benötigt.

Auch hängt es von der Art der Eingabe ab, die Sie verwenden. Sie sehen beispielsweise, dass sich das Wertattribut mit einer ausgeblendeten Eingabe, aber nicht mit der Textbox ändert.

EDIT:

von newDiv an den Körper anhängt, das Textfeld und der Wert der Code angezeigt werden. Here's a test page. Sie können sowohl den Code als auch die Vorschau sehen, was passiert. Die Warnung zeigt jedoch aus den oben erläuterten Gründen kein Attribut 'value' an.

+0

Also dann ist es unmöglich, ein Textfeld dynamisch zu erstellen und den Wert darin festzulegen und es dem Benutzer anzeigen zu lassen (über das DOM würde offensichtlich String-Verkettung funktionieren)? – Mason

+0

Der Wert wird immer angezeigt, wenn der Benutzer das Textfeld anschaut. Sie werden den Wert nicht sehen, wenn Sie den HTML-Code betrachten. Der Grund dafür, dass Sie keine generierte Ausgabe sehen, ist, dass Sie newDiv nicht an ein Element anhängen, das sich gerade auf der Seite befindet, z. 'body') ... sehe die Überarbeitung meiner Antwort – munch

+0

http://jsbin.com/ayoca/3 - das funktioniert, ja? – JonathanK

1
var newDiv = $(document.createElement("div")); 

var newTextBox = $('<input />') 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox") 
    .val("my text"); // <-- You can use here... 

newTextBox.val("my text"); // <-- or here 
newDiv.append(newTextBox); 
alert(newDiv.html()); 
+0

Nein ... immer noch nicht den Wert als gesetzt sehen – Mason

+0

Versuchen Sie: alert ($ ("# textbox"). Html()); –

+0

Das gibt mir den richtigen Wert, ist aber nicht sehr nützlich, da ich versuche, dies in das DOM zu injizieren. Ich habe meine tatsächliche Verwendung in dem einfachsten möglichen Beispiel destilliert. Bearbeiten: es wäre $ ("# textbox"). Val()) da es eine Eingabe ist, aber ich verstehe, was du meintest. – Mason

0

Mit ein wenig Hack Sie es tun können ..

var newDiv = $('<div/>'); 
var newTextBox; 

newTextBox = $('<input/>') 
    .attr("type", "hidden") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
newTextBox.each(function(){this.type='text';}); 
alert(newDiv.html()); 

ersten seiner Art definieren, wie versteckt, weil dies den Wert Attribut erlauben, und dann Code Änderung mit Text es zu ..

1
$("#element")[0].setAttribute("value","newvalue"); 
0

Man kann auch tun, um diese

var chip = document.createElement("div"); chip.innerHTML="some value here" card.appendChild(chip)

Verwandte Themen