web-dev-qa-db-fra.com

Créer une étiquette en utilisant jQuery à la volée

J'ai besoin de créer une étiquette et un champ texte à la volée et d'inclure également datepicker pour le champ text. J'ai besoin de quelque chose comme ça:

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

J'ai essayé quelque chose comme ça dans jQuery:

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

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

Celui-ci ne crée pas en quelque sorte l'étiquette et le champ de texte. Je ne sais pas ce qui me manque.

MODIFIER

Pour être plus précis, je l’utilise dans les portlets et je n’ai pas de balises body dans la page jsp. Ainsi, lorsque j'appelle la fonction à ajouter au corps, ce n'est pas le cas.

jqueryformsjquery-uijquery-ui-datepickerdom-manipulation
15
user525146

Quelque chose comme ça marcherait:

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

Veuillez noter que vous n'avez pas à utiliser l'attribut for sur l'étiquette si l'élément d'entrée est à l'intérieur. Donc utilisez un de ceux-ci:

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

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

Vous devrez attacher l’étiquette que vous avez créée au DOM pour l’afficher

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

Où essayez-vous d'insérer l'étiquette? Si vous le souhaitez au début de la page, vous pouvez faire quelque chose comme ceci.

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) Il vous manque un devis de clôture à la fin de l'attribut ID.
2) Vous n'avez ajouté l'étiquette à rien.

0
Ilia G