Javascript Grails和Jquery日期选择器

我想写一段代码，允许我创建输入，如主题、购买日期和资产价值，输入框有“class=”datepicker“属性，起初所有内容都可以正常读取，但当我调用works来追加页面中的其他输入（与上面相同）时，“datepicker”不再有任何生命迹象。 我向您展示代码：

    <div class="well bs-component" ><fieldset><div id="elencoBeni">
        <div class="input-group">
            <span class="input-group-addon">Oggetto</span>
            <g:textField class="form-control" placeholder="Oggetto" name="oggetto" id="oggetto" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span>
            <g:textField class="form-control datepicker" placeholder="Data acquisto" name="dataAcquisto" id="dataAcquisto" />
            <span class="input-group-addon">Valore</span>
            <g:textField class="form-control" placeholder="Valore" name="valoreBene" id="valoreBene"/><br/>
        </div><br/>
    </div>
        <label class="btn btn-success" id="aggiungiOggetto" name="aggiungiOggetto"  >+</label>
    </fieldset></div>

奥盖托
瓦洛雷




+

jquery函数：

<g:javascript>
$(document).ready(function(){
        $('.datepicker').datepicker({
              language: 'it'
        });    var i = 0;
        $("#aggiungiOggetto").click(function(){
            $("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto'+i+'"  id="oggetto'+i+'"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto'+i+'" id="dataAcquisto'+i+'"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene'+i+'" id="valoreBene'+i+'"/><br/></div><br/>');

            i++
        });     </g:javascript>          

$（文档）.ready（函数（）{
$（'.datepicker'）.datepicker({
语言：“它”
})变量i=0；
$（“#aggiugegetto”）。单击（函数（）{
$（“#elencoBeni”）.append（'OggettoValore

'）；
我++
});               

因为输入是动态添加到dom的，所以在添加到dom后，需要初始化元素的日期选择器

$(document).ready(function() {
  $('.datepicker').datepicker({
    language: 'it'
  });
  var i = 0;
  $("#aggiungiOggetto").click(function() {
    $("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto' + i + '"  id="oggetto' + i + '"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto' + i + '" id="dataAcquisto' + i + '"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene' + i + '" id="valoreBene' + i + '"/><br/></div><br/>');

    // initialize datepicker again, which includes the dynamically added element
    $('.datepicker').datepicker({
      language: 'it'
    });

    i++
  });
});

$（文档）.ready（函数（）{
$（'.datepicker'）.datepicker({
语言：“它”
});
var i=0；
$（“#aggiugegetto”）。单击（函数（）{
$（“#elencoBeni”）.append（'OggettoValore

'）；
//再次初始化datepicker，它包含动态添加的元素
$（'.datepicker'）.datepicker({
语言：“它”
});
我++
});
});

因为新元素没有绑定

.datepicker（）

而不是：

$('.datepicker').datepicker({
      language: 'it'
});

使用：

$('body').on('focus',".datepicker", function(){
    $(this).datepicker({
      language: 'it'
    });
});