16

我需要动态创建一个标签和文本字段，还需要为文本字段包含日期选择器。我需要这样的东西：

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

我在 jQuery 中尝试过这样的事情：

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

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

这个不知何故不会创建标签和文本字段。我不确定我错过了什么。

编辑

更准确地说，我在 portlet 中使用它，并且我在 jsp 页面中没有正文标记。因此，当我调用该函数附加到正文时，它不会。

4

4 回答 4

26

像这样的东西会起作用：

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

for请注意，如果输入元素在其中，则不必使用标签上的属性。所以使用其中之一：

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

<label for="x1"></label> <input id="x1">
于 2012-05-01T16:47:45.880 回答
4

您需要将您创建的标签附加到 DOM 以使其显示：

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();
于 2012-05-01T16:45:00.433 回答
1

你想在哪里插入标签？如果你想要它在页面的开头，你可以做这样的事情。

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

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

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

    $(':input', $label).datepicker();
});
于 2012-05-01T16:45:33.510 回答
0

1）您在 ID 属性末尾缺少结束引号。
2）您没有将标签本身附加到任何东西上。

于 2012-05-01T16:45:38.277 回答