wake-up-neo.com

Erstellen Sie ein Etikett mit jQuery on the fly

Ich muss ein Label und ein Textfeld im Handumdrehen erstellen und auch Datumsauswahl für das Textfeld enthalten. Ich brauche so etwas:

<label for="from">From </label> <input type="text" id="from" name="from" />

Ich habe so etwas in jQuery ausprobiert:

var label = $("<label>").attr('for', "from");   
                    label.html('Date: ' +
                        '<input type="text" id="from name="from" value="">');

                    $(function() {
                        $("#from").datepicker();
                    }); 

Dieses erstellt das Etikett und auch das Textfeld irgendwie nicht. Ich bin mir nicht sicher, was mir fehlt.

EDIT

Genauer gesagt verwende ich dies in den Portlets und ich habe keine Body-Tags auf der JSP-Seite. Wenn ich also die Funktion zum Anhängen an den Körper anrufe, ist dies nicht der Fall.

15
user525146

So etwas würde funktionieren:

//Create the label element
var $label = $("<label>").text('Date:');
//Create the input element
var $input = $('<input type="text">').attr({id: 'from', name: 'from'});

//Insert the input into the label
$input.appendTo($label);
//Insert the label into the DOM - replace body with the required position
$('body').append($label);

//applying datepicker on input
input.datepicker();

jsFiddle Demo

Bitte beachten Sie, dass Sie das Attribut for nicht für die Beschriftung verwenden müssen, wenn das Eingabeelement darin ist. Verwenden Sie also eine davon:

<label><input id="x1"></label>

<label for="x1"></label> <input id="x1">
25
kapa

Sie müssen das von Ihnen erstellte Etikett an das DOM anhängen, damit es angezeigt wird:

var label = $("<label>").attr('for', "from");
    label.html('Date: ' +
      '<input type="text" id="from name="from" value="">');

label.appendTo('body');

// set up datepicker
label.find('#from').datepicker();
4
rjz

Wo versuchen Sie, das Etikett einzufügen? Wenn Sie es am Anfang der Seite haben möchten, können Sie so etwas tun.

var $label = $("<label>").attr('for', "from");   

$label.html('Date: <input type="text" id="from" name="from" value="">');

$(function() {
    $('body').prepend($label);

    $(':input', $label).datepicker();
});
1
Bryan

1) Das Schlusszitat fehlt am Ende des ID-Attributs.
2) Sie haben das Etikett selbst an nichts angehängt.

0
Ilia G