jquery追加项目有问题答案

【问题标题】：Have a problem with jquery append itemsjquery追加项目有问题
【发布时间】：2009-08-27 09:55:48
【问题描述】：

我对 datePicker 有疑问。当使用 datepicker 创建一个新的文本字段并将其附加到某个 div 时，它将无法正常工作。有没有人遇到过同样的问题...

$(function(){

    $("#DP").datepicker({showOn: 'button', buttonId: 'kalendar', buttonImage: 'calendar.gif', buttonImageOnly: true});

    $('a').click(function(){

         $('<input type="text" id="DP">').appendTo('#some_div').show();   
    });
});
...
...

<\body>
<\div id="some_div"></div>
<\a href="#">New datepicker<\/a>
...

我需要可更改数量的 datePickers 字段。对不起我的英语..

【问题讨论】：

标签： jquery datepicker append

【解决方案1】：

我认为这可以满足您的要求：

...

  <script type="text/javascript">
    $(document).ready(function(){
        field_count = 0;

        $("#add_datepicker").click(function(){
            field_count++;
            var new_field = jQuery("<input type=\"text\" />")
            new_field.attr("id","datepicker_"+field_count);
            new_field.attr("name","datepicker_"+field_count);
            $('#container').append(new_field);
            $('#container').append(jQuery("<br />"));
            $("#datepicker_"+field_count).datepicker();
        });
  });
  </script>
</head>
<body>

<form>
<input type="button" id="add_datepicker" value="Add Datepicker"/>
<div id="container">

</div>
</form>

...

这允许您添加另一个具有唯一 id 和 name 的 <input> 元素，以便可以将其作为表单数据提交。

【讨论】：

【解决方案2】：

问题是您将“全部”（即一个）#DP 设置为 document.ready 中的日期选择器，然后创建一个 ID 为 #DP 的新输入。这不会自动设置为日期选择器，您需要在“收缩时间”将新输入设置为日期选择器，即

$('a').click(function(){

     $('<input type="text" id="DP">').
         datepicker(/*...*/).appendTo('#some_div').show();   
});

注意！你只能有一个 ID=DP 的 DOM 元素

【讨论】：