复制jQuery datepicker [英] duplicating jQuery datepicker

问题描述

datepicker 函数仅适用于创建的第一个输入框。

The datepicker function only works on the first input box that is created.

我正在尝试通过克隆包含它的 div 复制一个datepicker。

I'm trying to duplicate a datepicker by cloning the div that is containing it.

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

根据 jQuery UI文档我只需要做 $（'＃example'）。datepicker（）; 并且它确实有效，但仅限于创建的第一个datepicker。

To initialize the datepicker, according to the jQuery UI documentation I only have to do $('#example').datepicker(); and it does work, but only on the first datepicker that is created.

复制 div 的代码是以下内容：

The code to duplicate the div is the following:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

最奇怪的是在 document.ready 我有：

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

如果我点击 #txt 它始终有效。

and if I click on the #txt it always works.

推荐答案

我建议你也只使用一个通用的类名。但是，如果您出于某种原因反对这种情况，您还可以编写一个函数来为模板中的所有文本框创建日期选择器 div （在每次复制后调用）。类似于：

I'd recommend just using a common class name as well. However, if you're against this for some reason, you could also write a function to create date pickers for all text boxes in your template div (to be called after each duplication). Something like:

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}

这篇关于复制jQuery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！